:root {
     --purple: #260c35;
     --deep: #100714;
     --mid: #4c1764;
     --gold: #e7bd62;
     --goldlight: #f2d78f;
     --ivory: #f7f2e9;
     --ink: #211b24;
     --serif: 'Playfair Display', Georgia, serif;
     --sans: 'DM Sans', Arial, sans-serif
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth;
     scroll-padding-top: 90px
 }

 body {
     margin: 0;
     background: var(--deep);
     font-family: var(--sans);
     font-size: 14px;
     color: var(--ink)
 }

 a {
     text-decoration: none
 }

 .site-nav {
     background: #0d0711;
     border-bottom: 1px solid #5c462b;
     padding: 8px 0
 }

 .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

 .brand-logo {
     width: 160px;
     height: 95px;
     object-fit: contain;
     display: block
 }

 .site-nav .nav-link {
     font-size: 14px;
     color: #f3edf4;
     padding: 32px 18px !important
 }

 .site-nav .nav-link:hover, .site-nav .nav-link.active {
     color: var(--goldlight)
 }

 .site-nav .nav-link.active:after {
     content: '';
     display: block;
     width: 23px;
     height: 2px;
     background: var(--gold);
     margin-top: 5px
 }

 .btn {
     border-radius: 0;
     font-size: 12px;
     font-weight: 700;
     padding: 13px 20px;
     transition: .2s
 }

 .btn-gold {
     background: linear-gradient(135deg, var(--goldlight), var(--gold));
     color: #211321;
     border: 1px solid var(--gold)
 }

 .btn-gold:hover {
     background: #f8dfa2;
     color: #211321;
     transform: translateY(-2px)
 }

 .btn-outline-gold {
     border: 1px solid var(--gold);
     color: #fff
 }

 .btn-outline-gold:hover {
     background: var(--gold);
     color: var(--deep)
 }

 
/* Donate button */
.btn-donate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border: 1px solid var(--gold);
    border-radius: 0;
    background: transparent;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    transition: all .25s ease;
    margin-right: 10px;
}

.btn-donate:hover,
.btn-donate:focus {
    border-color: var(--gold);
    background: var(--gold);
    color: #100714;
}


 .eyebrow {
     font-size: 10px;
     letter-spacing: .23em;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--gold);
     margin-bottom: 17px
 }

 .eyebrow-purple {
     color: #aa7a32
 }

 .section-ivory {
     background: var(--ivory)
 }

 .section-title {
     font: 400 clamp(30px, 3.3vw, 45px)/1.15 var(--serif);
     letter-spacing: -.03em;
     margin: 0
 }

 .section-title em {
     color: var(--mid)
 }

 .hero {
    position: relative;
    min-height: 580px;
    color: white;
    background: #100714;
    overflow: hidden;
}

.hero-image {
    position: absolute;
    inset: 0 0 0 35%;
    background: url('../assets/hero-image.png') center 35% / cover no-repeat;
}

/* Blend the left edge of the photo into the text area */
.hero-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        #100714 0%,
        #100714 25%,
        rgba(16, 7, 20, 0.98) 32%,
        rgba(16, 7, 20, 0.88) 39%,
        rgba(16, 7, 20, 0.62) 47%,
        rgba(16, 7, 20, 0.28) 56%,
        rgba(16, 7, 20, 0.04) 68%,
        transparent 76%
    );
}
 .hero-content {
     position: relative;
     min-height: 450px;
     display: flex;
     align-items: center
 }

 .hero-copy {
     width: 50%;
     max-width: 540px;
     padding: 118px 0
 }

 .hero h1 {
     font: 400 clamp(49px, 4.5vw, 69px)/1.04 var(--serif);
     letter-spacing: -.04em;
     margin: 0 0 20px
 }

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

 .hero-intro {
     max-width: 410px;
     color: #e5dfe6;
     font-size: 16px;
     line-height: 1.75;
     margin-bottom: 22px
 }

 .hero-note {
     position: absolute;
     right: 2%;
     bottom: 20%;
     font: italic 17px/1.3 var(--serif);
     transform: rotate(-7deg);
     text-shadow: 0 2px 12px #000
 }

 .purpose {
     padding: 75px 0
 }

 .purpose-copy {
     border-left: 1px solid #d9c8a9;
     padding-left: 28px
 }

 .purpose-copy p {
     font-size: 14px;
     line-height: 1.8;
     color: #625a64
 }

 .text-link {
     display: inline-flex;
     gap: 8px;
     align-items: center;
     color: #a77b2e;
     font-size: 14px;
     font-weight: 700
 }

 .text-link:hover {
     color: var(--mid)
 }

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

 .values article {
     text-align: center;
     padding: 0 14px;
     border-left: 1px solid #dfd5c7
 }

 .values article>span {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #eee5d7;
     color: var(--mid);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     margin-bottom: 12px
 }

 .values h3 {
     text-transform: uppercase;
     letter-spacing: .1em;
     font-size: 14px;
     font-weight: 700
 }

 .values p {
     font-size: 12px;
     line-height: 1.55;
     color: #716a72;
     margin: 0
 }

 .programmes {
     background: var(--mid);
     color: white;
     padding-bottom: 14px
 }

 .section-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 22px;
     padding-bottom: 18px
 }

 .light-link {
     color: var(--goldlight)
 }

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

 .programme-card {
     min-height: 450px;
     position: relative;
     display: flex;
     align-items: flex-end;
     background-size: cover;
     background-position: center;
     isolation: isolate;
     overflow: hidden
 }

 .programme-card:before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: -1;
     background: linear-gradient(180deg, transparent 5%, rgba(13, 7, 17, .2) 34%, rgba(13, 7, 17, .97) 100%)
 }

 .inclusion {
     background-image: url('../assets/programme1.png')
 }

 .media {
     background-image: url('../assets/programme2.png')
 }

 .seniors {
     background-image: url('../assets/programme3.png')
 }

 .programme-card>div {
     padding: 28px clamp(22px, 4vw, 54px);
     width: 100%
 }

 .programme-card small {
     font-size: 12px;
     color: var(--goldlight);
     letter-spacing: .15em;
     font-weight: 700
 }

 .programme-card h3 {
     font: 400 clamp(34px, 2.5vw, 44px)/1.1 var(--serif);
     margin: 12px 0
 }

 .programme-card p {
     font-size: 14px;
     line-height: 1.6;
     color: #e1d9e3;
     max-width: 245px
 }

 .programme-card a {
     font-size: 14px;
     color: var(--goldlight);
     font-weight: 700
 }

 .approach {
     padding: 65px 0;
     overflow: hidden
 }

.approach-image {
    position: relative;
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
    padding: 0 0 20px 0;
}

/* Organic curved gold outline */
.approach-image::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -12px;
    right: 8px;
    bottom: 14px;
    border: 1px solid #d9b96e;
    border-radius: 48% 52% 45% 55% / 42% 40% 60% 58%;
    transform: rotate(-7deg);
    pointer-events: none;
}

.approach-image img {
    display: block;
    position: relative;
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center center;
    border-radius: 48% 52% 55% 65% / 42% 50% 70% 78%;
}

/* Caption overlapping the lower-right edge */
.approach-image div {
    position: absolute;
    right: -8px;
    bottom: 20px;
    z-index: 2;
    background: #f7f2e9;
    padding: 13px 16px;
    color: #54206c;
    font: italic 15px/1.4 var(--serif);
    transform: rotate(-5deg);
}

.approach-image div strong {
    font-weight: 700;
}

 .subhead {
     color: #756d76;
     font-size: 14px;
     margin: 13px 0 27px
 }

 .steps {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 12px;
     position: relative
 }

 .steps:before {
     content: '';
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     height: 1px;
     background: #dfc78f
 }

 .steps article {
     position: relative
 }

 .steps span {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #f0dba9;
     color: #9b712d;
     font-size: 12px;
     font-weight: 700;
     margin-bottom: 14px
 }

 .steps h3 {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px
 }

 .steps p {
     font-size: 13px;
     line-height: 1.55;
     color: #746d75;
     margin: 0
 }

 .founder {
     display: grid;
     grid-template-columns: 28% 1fr 25%;
     align-items: stretch;
     background: var(--mid);
     color: #fff;
     border-block: 1px solid rgba(231, 189, 98, .2)
 }

 .founder-photo {
     min-height: 300px
 }

 .founder-photo img {
     width: 100%;
     height: 100%;
     min-height: 300px;
     object-fit: cover;
     object-position: center 25%;
     filter: saturate(.82)
 }

 .founder-copy {
     padding: 42px clamp(28px, 5vw, 70px);
     align-self: center
 }

 .founder-copy h2 {
     font: 400 clamp(42px, 3vw, 54px)/1.12 var(--serif);
     margin-bottom: 15px
 }

 .founder-copy>p:not(.eyebrow) {
     font-size: 16px;
     line-height: 1.8;
     color: #d5cbd8;
     margin-bottom: 20px
 }

 .founder blockquote {
     align-self: center;
     border-left: 1px solid #9c7842;
     margin: 32px 0;
     padding: 0 clamp(20px, 3vw, 42px)
 }

 .founder blockquote b {
     display: block;
     color: var(--gold);
     font: 55px/1 var(--serif);
     height: 43px
 }

 .founder blockquote p {
     font: italic clamp(16px, 1.8vw, 22px)/1.4 var(--serif);
     color: #e4d5b8;
     margin-bottom: 18px
 }

 .founder blockquote span {
     display: block;
     width: 42px;
     height: 2px;
     background: var(--gold)
 }

 .involve {
     position: relative;
     overflow: hidden;
     background: #1a1018;
     color: white;
     padding: 68px 0
 }

 .involve:before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(12, 7, 15, .94), rgba(12, 7, 15, .76) 48%, rgba(12, 7, 15, .25)), url('https://images.unsplash.com/photo-1511632765486-a01980e01a18?auto=format&fit=crop&w=1800&q=85') center/cover
 }

 .involve .container {
     position: relative
 }

 .involve h2 {
     font: 400 clamp(43px, 4vw, 59px)/1.08 var(--serif);
     margin-bottom: 15px
 }

 .involve .col-lg-7>p:last-child {
     max-width: 520px;
     font-size: 16px;
     line-height: 1.75;
     color: #e3dce5;
     margin: 0
 }

 .footer {
      position: relative;
    overflow: hidden;
    isolation: isolate;
     background: #0d0711;
     color: white;
     padding: 52px 0 20px
 }

 .footer:before {
     content: '';
     position: absolute;
     width: 470px;
     height: 470px;
     border: 1px solid rgba(231, 189, 98, .06);
     border-radius: 50%;
     right: -200px;
     top: -220px;
     box-shadow: 0 0 0 35px rgba(231, 189, 98, .015), 0 0 0 70px rgba(231, 189, 98, .012)
 }

 .footer .row>div {
     position: relative
 }

 .footer-logo {
     width: 165px;
     height: 95px;
     object-fit: contain;
     margin-bottom: 15px
 }

 .footer p {
     font-size: 14px;
     line-height: 1.8;
     color: #bdb3c1;
     max-width: 330px
 }

 .social {
     display: flex;
     gap: 9px;
     margin-top: 18px
 }

 .social a {
     width: 30px;
     height: 30px;
     border: 1px solid var(--gold);
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--gold)
 }

 .social a:hover {
     background: var(--gold);
     color: var(--deep)
 }

 .footer-links {
     border-left: 1px solid rgba(231, 189, 98, .17);
     padding-left: 27px
 }

 .footer-links h3 {
     font-size: 15px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--goldlight);
     font-weight: 700;
     margin: 6px 0 18px
 }

 .footer-links>a:not(.text-link) {
     display: block;
     color: #d5cdd8;
     font-size: 14px;
     margin-bottom: 11px
 }

 .footer-links>a:hover {
     color: var(--goldlight)
 }

 .footer-bottom {
     display: flex;
     justify-content: space-between;
     gap: 18px;
     border-top: 1px solid rgba(255, 255, 255, .09);
     margin-top: 40px;
     padding-top: 18px;
     font-size: 12px;
     color: #9e93a3
 }

 .footer-bottom a {
     color: #bdb3c1
 }

 .footer-watermark {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);

    font-family: "Playfair Display", serif;
    font-size: clamp(70px, 15vw, 170px);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 0.8;

    color: rgba(255, 255, 255, 0.07);
    white-space: nowrap;

    pointer-events: none;
    user-select: none;
    z-index: -1;
}

 @media(max-width:991.98px) {
     .site-nav .navbar-collapse {
         padding: 14px 0
     }

     .site-nav .nav-link {
         padding: 10px 0 !important
     }

     .hero, .hero-content {
         min-height: 470px
     }

     .hero-copy {
         width: 70%
     }

     .purpose-copy {
         border-left: 0;
         border-top: 1px solid #d9c8a9;
         padding: 20px 0 0
     }

     .values {
         margin-top: 10px
     }

     .programme-card>div {
         padding: 22px
     }

     .approach-image {
         max-width: 430px;
         margin: 0 auto 15px
     }

     .founder {
         grid-template-columns: 34% 1fr
     }

     .founder blockquote {
         grid-column: 2;
         margin: 0 30px 30px
     }

     .founder-photo {
         grid-row: span 2
     }

     .footer-links {
         padding-left: 18px
     }
 }

 @media(max-width:767.98px) {
     .brand-logo {
         width: 140px;
         height: 52px
     }

     .hero, .hero-content {
         min-height: 570px;
         align-items: flex-end
     }

     .hero-image {
         inset: 0;
         background-position: 57% center
     }

     .hero-shade {
         background: linear-gradient(0deg, rgba(13, 6, 17, .99), rgba(13, 6, 17, .9) 35%, rgba(13, 6, 17, .25) 75%)
     }

     .hero-copy {
         width: 100%;
         padding: 230px 0 38px
     }

     .hero h1 {
         font-size: clamp(39px, 10vw, 55px)
     }

     .hero-note {
         top: 115px;
         bottom: auto;
         right: 7%;
         font-size: 17px
     }

     .purpose {
         padding: 40px 0
     }

 .purpose-copy {
     border-left: 1px solid #d9c8a9;
     padding-left: 28px
 }

 .purpose-copy p {
     font-size: 14px;
     line-height: 1.8;
     color: #625a64
 }

 .text-link {
     display: inline-flex;
     gap: 8px;
     align-items: center;
     color: #a77b2e;
     font-size: 14px;
     font-weight: 700
 }


     .values article {
         padding: 0 8px
     }

     .values article>span {
         width: 48px;
         height: 48px;
         font-size: 21px
     }

     .values h3 {
         font-size: 9px
     }

     .values p {
         font-size: 9px
     }

     .section-bar {
         padding-inline: 20px
     }

     .programme-grid {
         grid-template-columns: 1fr
     }

     .programme-card {
         min-height: 360px
     }

     .programme-card>div {
         padding: 28px 25px
     }

     .programme-card h3 {
         font-size: 31px
     }

     .approach {
         padding: 45px 0
     }

     .approach-image {
         max-width: 360px
     }

     .approach-image img {
         height: 270px
     }

     .steps {
         grid-template-columns: repeat(3, 1fr);
         row-gap: 25px
     }

   

 .steps:before {
     content: '';
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     height: 1px;
     background: #dfc78f
 }

 .steps article {
     position: relative
 }

 .steps span {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #f0dba9;
     color: #9b712d;
     font-size: 12px;
     font-weight: 700;
     margin-bottom: 14px
 }

 .steps h3 {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px
 }

 .steps p {
     font-size: 13px;
     line-height: 1.55;
     color: #746d75;
     margin: 0
 }


     .founder {
         grid-template-columns: 1fr
     }

     .founder-photo {
         min-height: 300px;
         max-height: 390px;
         grid-row: auto
     }

     .founder-photo img {
         min-height: 300px;
         max-height: 390px
     }

     .founder-copy {
         padding: 35px 25px 20px
     }

     .founder blockquote {
         grid-column: auto;
         margin: 0 25px 35px;
         padding-left: 23px
     }

     .footer {
         padding-top: 40px
     }
 .footer-links {
     border-left: 1px solid rgba(231, 189, 98, .17);
     padding-left: 27px
 }

 .footer-links h3 {
     font-size: 15px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--goldlight);
     font-weight: 700;
     margin: 6px 0 18px
 }

 .footer-links>a:not(.text-link) {
     display: block;
     color: #d5cdd8;
     font-size: 14px;
     margin-bottom: 11px
 }

 .footer-links>a:hover {
     color: var(--goldlight)
 }
 .footer-watermark{
    display:none;
 }


     .footer-bottom {
         flex-direction: column;
         align-items: flex-start;
         margin-top: 30px
     }
 }

 @media(max-width:420px) {
     .hero-copy .btn {
         width: 100%;
         margin-right: 0 !important
     }

     .values {
         grid-template-columns: 1fr;
         gap: 20px
     }

     .values article {
         border: 0;
         display: grid;
         grid-template-columns: 50px 1fr;
         column-gap: 12px;
         text-align: left;
         align-items: center;
         padding: 0
     }

     .values article>span {
         grid-row: span 2;
         margin: 0
     }

     .values h3 {
         align-self: end;
         margin-bottom: 4px
     }

     .values p {
         align-self: start
     }

     .section-bar {
         gap: 12px;
         align-items: flex-start
     }

     .section-bar .text-link {
         font-size: 10px
     }

     .steps {
         grid-template-columns: repeat(2, 1fr)
     }
 }


 
/* ==========================
   ABOUT PAGE
========================== */

.about-hero {
    position: relative;
    overflow: hidden;
    background: #100714;
    color: #fff;
    padding: 70px 0 40px;
}

.about-hero .container {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 65px;
}

.about-hero-content {
    position: relative;
    z-index: 2;
}

.about-hero-content .eyebrow,
.about-values .eyebrow,
.about-cta .eyebrow {
    color: var(--gold);
}

.about-hero h1 {
    font: 400 clamp(44px, 5vw, 58px)/1.08 var(--serif);
    letter-spacing: -0.04em;
    margin: 18px 0 25px;
}

.about-hero h1 em,
.section-title em,
.about-cta h2 em {
    color: var(--purple, #622878);
}

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

.about-hero-content > p:not(.eyebrow) {
    max-width: 480px;
    color: #e5dfe6;
    line-height: 1.85;
    margin-bottom: 28px;
}

.about-hero-image {
    position: relative;
    min-width: 0;
}

.about-hero-image::before {
    content: "";
    position: absolute;
    inset: -15px 18px 15px -15px;
    border: 1px solid var(--gold);
    border-radius: 48% 52% 8px 8px;
    pointer-events: none;
}

.about-hero-image img {
    display: block;
    width: 100%;
    height: 440px;
    object-fit: cover;
    object-position: center;
    border-radius: 48% 52% 8px 8px;
}

.about-image-note {
    position: absolute;
    right: -12px;
    bottom: 25px;
    padding: 17px 22px;
    background: #f7f2e9;
    color: #54206c;
    font: italic 16px/1.5 var(--serif);
    transform: rotate(-4deg);
    box-shadow: 0 8px 25px #0002;
}

.about-purpose {
    padding: 100px 0;
}

.about-lead {
    color: #33233a;
    font: 400 25px/1.5 var(--serif);
    margin-bottom: 22px;
}

.about-purpose .col-lg-7 > p:not(.about-lead) {
    color: #716a73;
    line-height: 1.9;
}

.about-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #54206c;
    font-weight: 700;
    text-decoration: none;
    margin-top: 12px;
}

.about-text-link:hover {
    color: #a8792e;
}

.vision-mission {
    padding: 95px 0;
    background: #4c1764;
    color: #fff;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 48px;
}

.section-heading .section-title,
.about-purpose .section-title,
.about-values .section-title {
    font: 400 clamp(35px, 4vw, 49px)/1.15 var(--serif);
    letter-spacing: -0.035em;
}

.vision-mission .section-title,
.about-values .section-title {
    color: #fff;
}

.vision-mission .section-title em,
.about-values .section-title em {
    color: var(--gold);
}

.purpose-card {
    height: 100%;
    padding: 38px;
    border: 1px solid rgba(217, 185, 110, 0.3);
    background: rgba(255, 255, 255, 0.025);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.purpose-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
}

.purpose-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 28px;
    border-radius: 50%;
    background: rgba(217, 185, 110, 0.12);
    color: var(--gold);
    font-size: 23px;
}

.purpose-card .eyebrow {
    color: var(--gold);
}

.purpose-card h3 {
    font: 400 29px/1.25 var(--serif);
    margin: 14px 0;
}

.purpose-card > p:last-child {
    color: #d1c7d4;
    line-height: 1.8;
    margin: 0;
}

.about-people {
    padding: 100px 0;
}

.section-description {
    max-width: 590px;
    margin: 18px auto 0;
    color: #756d76;
    line-height: 1.8;
}

.people-card {
    height: 100%;
    background: #fff;
    box-shadow: 0 8px 35px rgba(35, 20, 38, 0.07);
}

.people-card img {
    display: block;
    width: 100%;
    height: 270px;
    object-fit: cover;
}

.people-card-content {
    padding: 26px 25px 30px;
}

.people-card-content span {
    color: #a8792e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.people-card h3 {
    margin: 13px 0;
    color: #27182b;
    font: 400 27px/1.25 var(--serif);
}

.people-card p {
    margin: 0;
    color: #756d76;
    line-height: 1.8;
    font-size: 14px;
}

.about-values {
    padding: 100px 0;
    background: #190d20;
    color: #fff;
}

.about-values .row.align-items-end > .col-lg-5 p {
    color: #cfc3d2;
    line-height: 1.8;
}

.value-item {
    position: relative;
    height: 100%;
    padding: 32px 28px;
    border-top: 1px solid rgba(217, 185, 110, 0.55);
}

.value-item > span {
    position: absolute;
    top: 30px;
    right: 25px;
    color: #c4a15a;
    font-size: 12px;
}

.value-item > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: #f0dba9;
    color: #54206c;
    font-size: 23px;
}

.value-item h3 {
    font: 400 27px var(--serif);
    margin-bottom: 14px;
}

.value-item p {
    color: #cfc3d2;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}


.about-cta {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
   background:
    linear-gradient(
        90deg,
        rgba(16, 7, 20, 0.65),
        rgba(16, 7, 20, 0.45)
    ),
    url('../assets/about-cta.png') center 45% / cover no-repeat;
    color: #fff;
    text-align: center;
}

.about-cta-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

.about-cta .eyebrow {
    color: var(--gold);
}

.about-cta h2 {
    font: 400 clamp(38px, 5vw, 57px)/1.15 var(--serif);
    letter-spacing: -0.035em;
    margin: 18px 0;
    color: #fff;
}

.about-cta h2 em {
    color: var(--gold);
}

.about-cta-content > p:not(.eyebrow) {
    max-width: 570px;
    margin: 0 auto 28px;
    color: #f0eaf1;
    line-height: 1.8;
}

@media (max-width: 575px) {
    .about-cta {
        padding: 85px 20px;
        background-position: center;
    }
}


/* Responsive layout */
@media (max-width: 991px) {
    .about-hero {
        padding: 70px 0 85px;
    }

    .about-hero .container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

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

    .about-hero-image {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }

    .about-hero-image img {
        height: 400px;
    }

    .about-purpose,
    .about-people,
    .about-values {
        padding: 75px 0;
    }
}

@media (max-width: 575px) {
    .about-hero {
        padding: 55px 0 70px;
    }

    .about-hero h1 {
        font-size: 43px;
    }

    .about-hero-image img {
        height: 300px;
    }

    .about-image-note {
        right: -4px;
        bottom: 18px;
        padding: 12px 14px;
        font-size: 13px;
    }

    .about-purpose,
    .about-people,
    .about-values,
    .vision-mission {
        padding: 65px 0;
    }

    .about-lead {
        font-size: 22px;
    }

    .purpose-card {
        padding: 27px;
    }

    .people-card img {
        height: 240px;
    }


}


/* ========================================
   MORETOLIFE PROGRAMMES PAGE
======================================== */

.programmes-hero {
    position: relative;
    overflow: hidden;
    padding: 55px 0 40px;
    background: #100714;
    color: #fff;
}

.programmes-hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
}

.programmes-hero-copy {
    position: relative;
    z-index: 2;
}

.programmes-hero .eyebrow,
.programmes-approach .eyebrow,
.programmes-cta .eyebrow {
    color: var(--gold);
}

.programmes-hero h1 {
    margin: 20px 0;
    font: 400 clamp(42px, 4.4vw, 64px)/1.09 var(--serif);
    letter-spacing: -.04em;
}

.programmes-hero h1 em,
.programmes-cta h2 em {
    color: var(--gold);
}

.programmes-hero-copy > p:not(.eyebrow) {
    max-width: 510px;
    margin-bottom: 28px;
    color: #e1d8e3;
    font-size: 16px;
    line-height: 1.85;
}

.programmes-hero-image {
    position: relative;
    min-width: 0;
}

.programmes-hero-image::before {
    content: "";
    position: absolute;
    inset: -13px 15px 15px -13px;
    border: 1px solid var(--gold);
    border-radius: 48% 52% 6px 6px;
}

.programmes-hero-image img {
    display: block;
    position: relative;
    width: 100%;
    height: 440px;
    object-fit: cover;
    border-radius: 48% 52% 6px 6px;
}

/* Introduction */

.programmes-intro {
    padding: 90px 0;
}

.programmes-lead {
    margin-bottom: 20px;
    color: #33233a;
    font: 400 25px/1.5 var(--serif);
}

.programmes-intro .col-lg-7 > p:not(.programmes-lead) {
    color: #756d76;
    line-height: 1.9;
}

/* Signature programmes */

.signature-programmes {
    padding: 35px 0 100px;
}

.programme-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 40px;
}

.programme-section-heading .section-title {
    max-width: 650px;
    color: #241629;
    font: 400 clamp(34px, 4vw, 48px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.programme-section-heading .section-title em {
    color: #622878;
}

.programme-section-heading > p {
    max-width: 310px;
    margin-bottom: 5px;
    color: #756d76;
    line-height: 1.8;
}

.programme-feature-card {
    height: 100%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 32px rgba(35, 20, 38, .07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.programme-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(35, 20, 38, .12);
}

.programme-feature-image {
    position: relative;
    overflow: hidden;
    background: #26142e;
}

.programme-feature-image img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform .4s ease;
}

.programme-feature-card:hover .programme-feature-image img {
    transform: scale(1.04);
}

.programme-number {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 13px;
    border-radius: 30px;
    background: #f0dba9;
    color: #54206c;
    font-size: 13px;
    font-weight: 700;
}

.programme-number small {
    font-size: 10px;
    opacity: .7;
}

.programme-feature-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 27px 24px 30px;
}

.programme-category {
    display: block;
    margin-bottom: 10px;
    color: #9b712d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.programme-feature-body h3,
.programme-support-card h3 {
    color: #28192d;
    font: 400 26px/1.25 var(--serif);
}

.programme-tagline {
    margin: 8px 0 12px;
    color: #54206c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
}

.programme-feature-body > p:not(.programme-tagline) {
    margin-bottom: 24px;
    color: #756d76;
    font-size: 14px;
    line-height: 1.85;
}

.programme-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    color: #54206c;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.programme-link i {
    transition: transform .2s ease;
}

.programme-link:hover {
    color: #9b712d;
}

.programme-link:hover i {
    transform: translate(3px, -2px);
}

/* Remaining three programmes */

.programme-more-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin: 85px 0 30px;
    padding-top: 35px;
    border-top: 1px solid #e1d6c7;
}

.programme-more-heading h3 {
    margin: 8px 0 0;
    color: #28192d;
    font: 400 clamp(28px, 3.2vw, 38px)/1.2 var(--serif);
}

.programme-more-heading > p {
    max-width: 300px;
    margin-bottom: 3px;
    color: #756d76;
    font-size: 14px;
    line-height: 1.8;
}

.programme-support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.programme-support-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 300px;
    padding: 26px 24px;
    border: 1px solid #e6dccc;
    background: rgba(255, 255, 255, .55);
    transition: background .25s ease, border-color .25s ease,
                transform .25s ease;
}

.programme-support-card:hover {
    transform: translateY(-4px);
    border-color: #d9b96e;
    background: #fff;
}

.support-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    margin-bottom: 25px;
    border-radius: 50%;
    background: #f0dba9;
    color: #54206c;
    font-size: 13px;
    font-weight: 700;
}

.support-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.programme-support-card h3 {
    margin: 2px 0 12px;
    font-size: 24px;
}

.programme-support-card p:not(.programme-category) {
    margin-bottom: 25px;
    color: #756d76;
    font-size: 14px;
    line-height: 1.8;
}

/* How we work */

.programmes-approach {
    overflow: hidden;
    padding: 100px 0;
    background: #190d20;
    color: #fff;
}

.programmes-approach-image {
    position: relative;
    padding: 0 15px 18px 0;
}

.programmes-approach-image::before {
    content: "";
    position: absolute;
    inset: -10px 22px 14px -12px;
    border: 1px solid #d9b96e;
    border-radius: 48% 52% 45% 55%;
    transform: rotate(-7deg);
}

.programmes-approach-image img {
    display: block;
    position: relative;
    width: 100%;
    height: 390px;
    object-fit: cover;
    border-radius: 48% 52% 45% 55%;
}

.approach-image-caption {
    position: absolute;
    right: -5px;
    bottom: 22px;
    padding: 13px 16px;
    background: #f7f2e9;
    color: #54206c;
    font: italic 15px/1.5 var(--serif);
    transform: rotate(-5deg);
}

.programmes-approach .section-title {
    margin: 15px 0 20px;
    font: 400 clamp(35px, 4vw, 48px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.programmes-approach .section-title em {
    color: var(--gold);
}

.programmes-approach-intro {
    margin-bottom: 25px;
    color: #d1c7d4;
    line-height: 1.85;
}

.approach-point {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    margin: 22px 0;
}

.approach-point > span {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(217, 185, 110, .13);
    color: var(--gold);
    font-size: 19px;
}

.approach-point h3 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
}

.approach-point p {
    margin: 0;
    color: #cfc3d2;
    font-size: 14px;
    line-height: 1.7;
}

/* Closing CTA */

.programmes-cta {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
   background:
    linear-gradient(
        90deg,
        rgba(16, 7, 20, 0.65),
        rgba(16, 7, 20, 0.45)
    ),
    url('../assets/about-cta.png') center 45% / cover no-repeat;
    color: #fff;
    text-align: center;
}

.programmes-cta-content {
    max-width: 780px;
    margin: 0 auto;
}

.programmes-cta h2 {
    margin: 18px 0;
    font: 400 clamp(37px, 4.8vw, 56px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.programmes-cta-content > p:not(.eyebrow) {
    max-width: 600px;
    margin: 0 auto 28px;
    color: #d7cbd9;
    line-height: 1.85;
}

/* Responsive */

@media (max-width: 991px) {
    .programmes-hero .container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .programmes-hero-copy {
        max-width: 680px;
    }

    .programmes-hero-image {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .programmes-hero-image img {
        height: 390px;
    }

    .programme-section-heading,
    .programme-more-heading {
        display: block;
    }

    .programme-section-heading > p,
    .programme-more-heading > p {
        max-width: 550px;
        margin-top: 15px;
    }

    .programme-support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .programmes-intro,
    .programmes-approach {
        padding: 75px 0;
    }

    .programmes-approach-image {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .programmes-hero {
        padding: 55px 0 70px;
    }

    .programmes-hero h1 {
        font-size: 42px;
    }

    .programmes-hero-image img {
        height: 290px;
    }

    .programmes-intro,
    .programmes-approach {
        padding: 65px 0;
    }

    .signature-programmes {
        padding: 25px 0 65px;
    }

    .programme-feature-image img {
        height: 235px;
    }

    .programme-more-heading {
        margin-top: 60px;
    }

    .programme-support-grid {
        grid-template-columns: 1fr;
    }

    .programme-support-card {
        min-height: 0;
    }

    .programmes-approach-image img {
        height: 300px;
    }

    .approach-image-caption {
        right: -4px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .programmes-cta {
        padding: 75px 20px;
    }
}


/* ========================================
   MORETOLIFE FOUNDER PAGE
======================================== */

.founder-hero {
    position: relative;
    overflow: hidden;
    padding: 60px 0 45px;
    background: #100714;
    color: #fff;
}

.founder-hero::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -180px;
    bottom: -270px;
    border: 1px solid rgba(217, 185, 110, .2);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(217, 185, 110, .025),
        0 0 0 90px rgba(217, 185, 110, .025);
    pointer-events: none;
}

.founder-hero .container {
    display: grid;
    grid-template-columns: 1fr .85fr;
    align-items: center;
    gap: 65px;
}

.founder-hero-copy {
    position: relative;
    z-index: 2;
}

.founder-hero .eyebrow,
.founder-background .eyebrow,
.founder-message .eyebrow,
.founder-cta .eyebrow {
    color: var(--gold);
}

.founder-hero h1 {
    max-width: 670px;
    margin: 20px 0 24px;
    font: 400 clamp(43px, 5vw, 56px)/1.08 var(--serif);
    letter-spacing: -.04em;
}

.founder-hero h1 em,
.founder-background .section-title em,
.founder-cta h2 em {
    color: var(--gold);
}

.founder-hero-copy > p:not(.eyebrow) {
    max-width: 510px;
    margin-bottom: 28px;
    color: #d9cfdd;
    font-size: 16px;
    line-height: 1.85;
}

.founder-hero-visual {
    position: relative;
    min-width: 0;
    padding: 0 18px 24px 0;
}

.founder-hero-visual::before {
    content: "";
    position: absolute;
    inset: -12px 25px 32px -12px;
    border: 1px solid var(--gold);
    border-radius: 48% 48% 4px 4px;
    transform: rotate(-3deg);
}

.founder-hero-visual > img {
    display: block;
    position: relative;
    width: 100%;
    height: 470px;
    object-fit: cover;
    object-position: center top;
    border-radius: 48% 48% 4px 4px;
    background: #291832;
}

.founder-nameplate {
    position: absolute;
    right: -8px;
    bottom: 0;
    z-index: 2;
    width: min(300px, 85%);
    padding: 19px 23px;
    background: #f5dfaa;
    color: #291832;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}

.founder-nameplate > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #8a642b;
}

.founder-nameplate h2 {
    margin: 7px 0 4px;
    font: 400 23px/1.25 var(--serif);
}

.founder-nameplate p {
    margin: 0;
    font-size: 12px;
}

/* Story */

.founder-story {
    padding: 95px 0;
}

.founder-story .section-title {
    max-width: 460px;
    margin-top: 15px;
    color: #241629;
    font: 400 clamp(35px, 4vw, 48px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.founder-story .section-title em {
    color: #622878;
}

.founder-story-copy {
    color: #756d76;
    font-size: 15px;
    line-height: 1.9;
}

.founder-story-copy .founder-lead {
    margin-bottom: 22px;
    color: #33233a;
    font: 400 25px/1.55 var(--serif);
}

.founder-story-copy p:last-child {
    margin-bottom: 0;
}

/* Professional background */

.founder-background {
    padding: 95px 0 105px;
    background: #190d20;
    color: #fff;
}

.founder-background-heading {
    max-width: 700px;
    margin-bottom: 45px;
}

.founder-background .section-title {
    margin: 15px 0;
    font: 400 clamp(35px, 4vw, 48px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.founder-background-heading > p:last-child {
    max-width: 590px;
    color: #d1c7d4;
    line-height: 1.8;
}

.founder-expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.founder-expertise-card {
    min-height: 255px;
    padding: 26px 22px;
    border: 1px solid rgba(217, 185, 110, .25);
    background: rgba(255, 255, 255, .025);
    transition: border-color .25s ease, background .25s ease,
                transform .25s ease;
}

.founder-expertise-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    background: rgba(255, 255, 255, .05);
}

.expertise-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: rgba(217, 185, 110, .13);
    color: var(--gold);
    font-size: 21px;
}

.founder-expertise-card h3 {
    margin-bottom: 12px;
    font: 400 22px/1.3 var(--serif);
}

.founder-expertise-card p {
    margin: 0;
    color: #cfc3d2;
    font-size: 13px;
    line-height: 1.8;
}

/* Book section */

.founder-book {
    padding: 95px 0;
}

.founder-book .section-title {
    margin: 15px 0 23px;
    color: #241629;
    font: 400 clamp(35px, 4vw, 48px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.founder-book .section-title em {
    color: #622878;
}

.founder-book .col-lg-7 > p:not(.eyebrow) {
    max-width: 600px;
    color: #756d76;
    font-size: 15px;
    line-height: 1.9;
}

.founder-book-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    overflow: hidden;
    background: #eee5d7;
}

.book-cover-placeholder {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 225px;
    min-height: 300px;
    padding: 28px 24px;
    background: #4c1764;
    color: #fff;
    box-shadow: 12px 15px 30px rgba(35, 20, 38, .2);
    text-align: center;
}

.book-cover-placeholder > span {
    color: var(--gold);
    font-size: 9px;
    letter-spacing: .12em;
}

.book-cover-placeholder h3 {
    margin: 35px 0;
    font: 400 43px/1.05 var(--serif);
}

.book-cover-placeholder h3 em {
    color: var(--gold);
}

.book-cover-line {
    width: 55px;
    height: 1px;
    margin: 0 auto 18px;
    background: var(--gold);
}

.book-cover-placeholder > p {
    margin: 0;
    color: #d9cfdd;
    font-size: 10px;
    letter-spacing: .04em;
}

.book-decoration {
    position: absolute;
    border: 1px solid #d9b96e;
    border-radius: 50%;
}

.book-decoration-one {
    width: 300px;
    height: 300px;
    transform: translate(35px, -20px);
}

.book-decoration-two {
    width: 370px;
    height: 370px;
    transform: translate(-25px, 20px);
    opacity: .55;
}

/* Founder's message */

.founder-message {
    position: relative;
    overflow: hidden;
    padding: 100px 20px;
    background:
        radial-gradient(ellipse at 80% 20%, #492453 0%, transparent 48%),
        #100714;
    color: #fff;
    text-align: center;
}

.founder-message-inner {
    max-width: 820px;
    margin: 0 auto;
}

.founder-quote-mark {
    display: block;
    height: 65px;
    color: var(--gold);
    font: 400 100px/.9 var(--serif);
}

.founder-message h2 {
    margin: 24px 0;
    font: italic 400 clamp(29px, 4vw, 43px)/1.4 var(--serif);
}

.founder-message-line {
    width: 65px;
    height: 2px;
    margin: 30px auto 20px;
    background: var(--gold);
}

.founder-message-signature {
    margin: 0;
    color: #d9cfdd;
    font-size: 13px;
    letter-spacing: .05em;
}

/* Call to action */

.founder-cta {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
   background:
    linear-gradient(
        90deg,
        rgba(16, 7, 20, 0.65),
        rgba(16, 7, 20, 0.45)
    ),
    url('../assets/about-cta.png') center 45% / cover no-repeat;
    color: #fff;
    text-align: center;
}

.founder-cta-content {
    max-width: 760px;
    margin: 0 auto;
}

.founder-cta h2 {
    margin: 18px 0;
    font: 400 clamp(38px, 4.8vw, 55px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.founder-cta-content > p:not(.eyebrow) {
    max-width: 620px;
    margin: 0 auto 28px;
    color: #d7cbd9;
    line-height: 1.85;
}

/* Responsive layout */

@media (max-width: 991px) {
    .founder-hero .container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .founder-hero-copy {
        max-width: 700px;
    }

    .founder-hero-visual {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .founder-hero-visual > img {
        height: 430px;
    }

    .founder-expertise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .founder-story,
    .founder-book {
        padding: 75px 0;
    }
}

@media (max-width: 575px) {
    .founder-hero {
        padding: 60px 0 75px;
    }

    .founder-hero h1 {
        font-size: 42px;
    }

    .founder-hero-visual > img {
        height: 350px;
    }

    .founder-nameplate {
        right: -3px;
        width: 255px;
        padding: 15px 17px;
    }

    .founder-nameplate h2 {
        font-size: 21px;
    }

    .founder-story,
    .founder-background,
    .founder-book {
        padding: 65px 0;
    }

    .founder-expertise-grid {
        grid-template-columns: 1fr;
    }

    .founder-expertise-card {
        min-height: 0;
    }

    .founder-book-visual {
        min-height: 340px;
    }

    .founder-message,
    .founder-cta {
        padding: 75px 20px;
    }
}



/* ========================================
   OUR APPROACH PAGE
======================================== */

/* Hero */
.approach-hero {
    padding: 60px 0 40px;
    background:
        radial-gradient(ellipse at 80% 90%, #43204f 0%, transparent 48%),
        #100714;
    color: #fff;
    text-align: center;
}

.approach-hero .container {
    max-width: 900px;
}

.approach-hero .eyebrow,
.approach-practice .eyebrow,
.approach-cta .eyebrow {
    color: var(--gold);
}

.approach-hero h1 {
    margin: 20px 0;
    font: 400 clamp(46px, 6vw, 76px)/1.08 var(--serif);
    letter-spacing: -.045em;
}

.approach-hero h1 em,
.approach-cta h2 em {
    color: var(--gold);
}

.approach-hero .container > p:not(.eyebrow) {
    max-width: 680px;
    margin: 0 auto 28px;
    color: #ddd2e0;
    font-size: 16px;
    line-height: 1.9;
}

/* Six-step journey */
.approach-journey {
    padding: 95px 0;
    overflow: hidden;
}

.approach-journey-visual {
    position: relative;
    padding: 0 18px 25px 0;
}

.approach-journey-visual::before {
    content: "";
    position: absolute;
    inset: -12px 25px 15px -12px;
    border: 1px solid #d9b96e;
    border-radius: 48% 52% 45% 55%;
    transform: rotate(-7deg);
}

.approach-journey-visual img {
    display: block;
    position: relative;
    width: 100%;
    height: 390px;
    object-fit: cover;
    object-position: center;
    border-radius: 48% 52% 45% 55%;
}

.approach-journey-caption {
    position: absolute;
    right: -4px;
    bottom: 27px;
    z-index: 2;
    padding: 14px 17px;
    background: #f7f2e9;
    color: #54206c;
    font: italic 15px/1.5 var(--serif);
    transform: rotate(-5deg);
    box-shadow: 0 5px 20px rgba(25, 13, 32, .08);
}

.approach-journey .section-title {
    margin: 14px 0 15px;
    color: #241629;
    font: 400 clamp(34px, 3.5vw, 46px)/1.16 var(--serif);
    letter-spacing: -.035em;
}

.approach-journey .section-title em {
    color: #622878;
}

.approach-journey-intro {
    max-width: 700px;
    margin-bottom: 28px;
    color: #756d76;
    font-size: 14px;
    line-height: 1.8;
}

.approach-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 22px;
    position: relative;
}

.approach-step-card {
    position: relative;
    min-width: 0;
    padding-top: 4px;
}

.approach-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #f0dba9;
    color: #805a21;
    font-size: 12px;
    font-weight: 700;
}

.approach-step-card:nth-child(3) .approach-step-number {
    background: #54206c;
    color: #fff;
}

.approach-step-card h3 {
    margin: 0 0 8px;
    color: #28192d;
    font-size: 17px;
    font-weight: 700;
}

.approach-step-card p {
    margin: 0;
    color: #756d76;
    font-size: 13px;
    line-height: 1.75;
}

/* Practical commitments */
.approach-practice {
    padding: 95px 0 105px;
    background: #190d20;
    color: #fff;
}

.approach-section-heading {
    max-width: 710px;
    margin-bottom: 42px;
}

.approach-section-heading .section-title {
    margin: 15px 0;
    font: 400 clamp(35px, 4vw, 49px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.approach-section-heading .section-title em {
    color: var(--gold);
}

.approach-section-heading > p:last-child {
    max-width: 610px;
    margin-bottom: 0;
    color: #d1c7d4;
    line-height: 1.85;
}

.approach-practice-card {
    height: 100%;
    min-height: 245px;
    padding: 27px 25px;
    border: 1px solid rgba(217, 185, 110, .22);
    background: rgba(255, 255, 255, .025);
    transition: transform .25s ease, border-color .25s ease,
                background .25s ease;
}

.approach-practice-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    background: rgba(255, 255, 255, .05);
}

.practice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 23px;
    border-radius: 50%;
    background: rgba(217, 185, 110, .13);
    color: var(--gold);
    font-size: 21px;
}

.practice-label {
    display: block;
    margin-bottom: 10px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
}

.approach-practice-card h3 {
    margin-bottom: 12px;
    font: 400 23px/1.3 var(--serif);
}

.approach-practice-card p {
    margin: 0;
    color: #cfc3d2;
    font-size: 13px;
    line-height: 1.8;
}

/* Learning and impact */
.approach-impact {
    padding: 95px 0;
}

.approach-impact .section-title {
    margin: 15px 0 22px;
    color: #241629;
    font: 400 clamp(36px, 4vw, 48px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.approach-impact .section-title em {
    color: #622878;
}

.approach-impact .col-lg-5 > p:not(.eyebrow) {
    color: #756d76;
    font-size: 14px;
    line-height: 1.9;
}

.approach-impact-list {
    border-top: 1px solid #e4d9c9;
}

.approach-impact-item {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid #e4d9c9;
}

.approach-impact-item > span {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0dba9;
    color: #805a21;
    font-size: 12px;
    font-weight: 700;
}

.approach-impact-item h3 {
    margin: 0 0 7px;
    color: #28192d;
    font-size: 16px;
    font-weight: 700;
}

.approach-impact-item p {
    margin: 0;
    color: #756d76;
    font-size: 13px;
    line-height: 1.8;
}

/* Final call to action */
.approach-cta {
 position: relative;
    overflow: hidden;
    padding: 120px 0;
   background:
    linear-gradient(
        90deg,
        rgba(16, 7, 20, 0.65),
        rgba(16, 7, 20, 0.45)
    ),
    url('../assets/about-cta.png') center 45% / cover no-repeat;
    color: #fff;
    text-align: center;
}

.approach-cta-content {
    max-width: 780px;
    margin: 0 auto;
}

.approach-cta h2 {
    margin: 18px 0;
    font: 400 clamp(38px, 4.8vw, 57px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.approach-cta-content > p:not(.eyebrow) {
    max-width: 620px;
    margin: 0 auto 28px;
    color: #d7cbd9;
    font-size: 15px;
    line-height: 1.85;
}

/* Responsive */
@media (max-width: 991px) {
    .approach-journey,
    .approach-practice,
    .approach-impact {
        padding: 75px 0;
    }

    .approach-journey-visual {
        max-width: 470px;
        margin: 0 auto 15px;
    }

    .approach-journey-visual img {
        height: 360px;
    }

    .approach-steps-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 25px 18px;
    }
}

@media (max-width: 575px) {
    .approach-hero {
        padding: 65px 0 75px;
    }

    .approach-hero h1 {
        font-size: 44px;
    }

    .approach-journey,
    .approach-practice,
    .approach-impact {
        padding: 65px 0;
    }

    .approach-journey-visual img {
        height: 300px;
    }

    .approach-journey-caption {
        right: -2px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .approach-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 18px;
    }

    .approach-practice-card {
        min-height: 0;
    }

    .approach-cta {
        padding: 75px 20px;
    }
}



/* ========================================
   MORETOLIFE GET INVOLVED PAGE
======================================== */

.get-involved-page {
    overflow: hidden;
}

.get-involved-page .eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
}

.get-involved-page .eyebrow-purple {
    color: #8a5b9c;
}

/* HERO */
.involved-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 520px;
    overflow: hidden;
    background: #100714;
    color: #fff;
}

.involved-hero-image,
.involved-hero-overlay {
    position: absolute;
    inset: 0;
}

.involved-hero-image {
    background:
        url("../assets/get-involved-hero.png")
        center 45% / cover no-repeat;
}

.involved-hero-overlay {
    background: linear-gradient(
        90deg,
        rgba(16, 7, 20, .98) 0%,
        rgba(16, 7, 20, .92) 35%,
        rgba(16, 7, 20, .64) 58%,
        rgba(16, 7, 20, .22) 100%
    );
}

.involved-hero-content {
    position: relative;
    z-index: 1;
    padding-top: 80px;
    padding-bottom: 80px;
}

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

.involved-hero .eyebrow,
.involved-cta .eyebrow {
    color: var(--gold);
}

.involved-hero h1 {
    margin: 20px 0 22px;
    font: 400 clamp(48px, 6vw, 76px)/1.06 var(--serif);
    letter-spacing: -.045em;
}

.involved-hero h1 em,
.involved-cta h2 em {
    color: var(--gold);
}

.involved-hero-copy > p:not(.eyebrow) {
    max-width: 510px;
    margin-bottom: 28px;
    color: #e1d7e3;
    font-size: 16px;
    line-height: 1.9;
}

/* INTRODUCTION */
.involved-intro {
    padding: 80px 0;
}

.involved-intro .section-title,
.involved-section-heading .section-title,
.involved-support .section-title {
    margin: 15px 0 0;
    color: #241629;
    font: 400 clamp(35px, 4vw, 49px)/1.15 var(--serif);
    letter-spacing: -.035em;
}

.involved-intro .section-title em,
.involved-section-heading .section-title em,
.involved-support .section-title em {
    color: #622878;
}

.involved-intro-text {
    margin: 0 0 15px;
    color: #34243a;
    font: 400 22px/1.6 var(--serif);
}

.involved-intro-secondary {
    margin: 0;
    color: #756d76;
    font-size: 14px;
    line-height: 1.9;
}

/* WAYS TO GET INVOLVED */
.involved-ways {
    padding: 95px 0 105px;
    background: #fff;
}

.involved-section-heading {
    max-width: 700px;
    margin-bottom: 42px;
}

.involved-section-heading .section-title {
    margin-bottom: 17px;
}

.involved-section-heading > p:last-child {
    max-width: 600px;
    margin-bottom: 0;
    color: #756d76;
    font-size: 14px;
    line-height: 1.9;
}

.involved-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid #eee5ed;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.involved-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(37, 19, 43, .09);
}

.involved-card-image {
    position: relative;
    height: 235px;
    overflow: hidden;
    background-color: #291832;
    background-position: center;
    background-size: cover;
}

.involved-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(16, 7, 20, .02) 35%,
        rgba(16, 7, 20, .48) 100%
    );
}

/* Use appropriate photographs saved in your assets folder */
.partner-image {
    background-image: url("../assets/partner-image.png");
}

.volunteer-image {
    background-image: url("../assets/volunteer-image.png");
}

.support-image {
    background-image: url("../assets/programme-support-image.png");
}

.referral-image {
    background-image: url("../assets/community-image.png");
}

.involved-card-number {
    position: absolute;
    right: 20px;
    bottom: 18px;
    z-index: 1;
    color: #fff;
    font: 400 38px/1 var(--serif);
}

.involved-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
}

.involved-card-label {
    margin-bottom: 12px;
    color: #8a5b9c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
}

.involved-card h3 {
    margin: 0 0 15px;
    color: #25152d;
    font: 400 29px/1.2 var(--serif);
}

.involved-card-body > p {
    color: #6f6572;
    font-size: 13px;
    line-height: 1.85;
}

.involved-card-detail {
    margin-bottom: 13px;
}

.involved-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 13px;
    color: #59246c;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.involved-link i {
    transition: transform .2s ease;
}

.involved-link:hover {
    color: #9b712d;
}

.involved-link:hover i {
    transform: translate(3px, -3px);
}

/* SUPPORT SECTION */
.involved-support {
    padding: 95px 0;
}

.involved-support-image {
    position: relative;
    padding: 0 18px 22px 0;
}

.involved-support-image::before {
    content: "";
    position: absolute;
    inset: -12px 25px 15px -12px;
    border: 1px solid #d9b96e;
    border-radius: 48% 52% 45% 55%;
    transform: rotate(-6deg);
}

.involved-support-image img {
    display: block;
    position: relative;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;
    border-radius: 48% 52% 45% 55%;
}

.involved-support .section-title {
    margin-bottom: 20px;
}

.involved-support-intro {
    color: #756d76;
    font-size: 14px;
    line-height: 1.9;
}

.involved-support-list {
    display: grid;
    gap: 17px;
    margin: 25px 0 30px;
    padding: 0;
    list-style: none;
}

.involved-support-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #433649;
    font-size: 13px;
    line-height: 1.7;
}

.involved-support-list i {
    flex-shrink: 0;
    color: #795087;
    font-size: 18px;
}

.btn-dark-purple {
    display: inline-block;
    padding: 14px 21px;
    border: 1px solid #281530;
    border-radius: 0;
    background: #281530;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    transition: background .2s ease, color .2s ease;
}

.btn-dark-purple:hover {
    border-color: #d9b96e;
    background: #d9b96e;
    color: #201126;
}

/* FINAL CTA */
.involved-cta {
  position: relative;
    overflow: hidden;
    padding: 30px 0;
   background:
    linear-gradient(
        90deg,
        rgba(16, 7, 20, 0.65),
        rgba(16, 7, 20, 0.45)
    ),
    url('../assets/about-cta.png') center 45% / cover no-repeat;
    color: #fff;
    text-align: center;
}

.involved-cta-content {
    position: relative;
    z-index: 1;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.involved-cta-content > * {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

.involved-cta h2 {
    margin-top: 18px;
    margin-bottom: 20px;
    font: 400 clamp(39px, 5vw, 60px)/1.13 var(--serif);
    letter-spacing: -.035em;
}

.involved-cta-content > p:not(.eyebrow) {
    margin-bottom: 28px;
    color: #e0d5e2;
    font-size: 14px;
    line-height: 1.9;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .involved-hero {
        min-height: 470px;
    }

    .involved-intro,
    .involved-ways,
    .involved-support {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .involved-card-image {
        height: 210px;
    }

    .involved-card-body {
        padding: 25px;
    }

    .involved-support-image {
        max-width: 500px;
        margin: 0 auto;
    }

    .involved-support-image img {
        height: 360px;
    }
}

@media (max-width: 575px) {
    .involved-hero {
        min-height: 460px;
    }

    .involved-hero-content {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .involved-hero h1 {
        font-size: 45px;
    }

    .involved-hero-overlay {
        background: rgba(16, 7, 20, .76);
    }

    .involved-intro,
    .involved-ways,
    .involved-support {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .involved-section-heading {
        margin-bottom: 30px;
    }

    .involved-card-image {
        height: 220px;
    }

    .involved-card-body {
        padding: 24px 22px;
    }

    .involved-card h3 {
        font-size: 26px;
    }

    .involved-support-image img {
        height: 300px;
    }

    .involved-cta-content {
        padding-top: 65px;
        padding-bottom: 65px;
    }
}