/*
====================================================================
HOMEPAGE PHOTO MAP

ABOUT SECTION:
- /assets/images/about-your-goals.jpg

SERVICES:
- /assets/images/service-health-wellness.jpg
- /assets/images/service-home-daily-living.jpg
- /assets/images/service-community-connection.jpg
- /assets/images/service-respite-transition.jpg
- /assets/images/service-specialised-support.jpg

FAMILIES + CARERS:
- /assets/images/families-carers.jpg

STORIES:
- /assets/images/story-training.jpg
- /assets/images/story-community.jpg
- /assets/images/story-family-guide.jpg

HERO SLIDER:
- /assets/images/hero-slide-1.jpg
- /assets/images/hero-slide-2.jpg
- /assets/images/hero-slide-3.jpg
====================================================================
*/

/*
====================================================================
JUNIPER CARE GHANA - MAIN WEBSITE STYLESHEET
Domain: https://jcaregh.com
File location: public_html/assets/css/site.css

Hero image directory:
public_html/assets/images/

Required hero image filenames:
- hero-slide-1.jpg
- hero-slide-2.jpg
- hero-slide-3.jpg

Recommended hero dimensions:
1920 x 900 px or 1920 x 1080 px

After uploading this file, clear browser/server cache.
====================================================================
*/

/* =========================================================
   1. DESIGN TOKENS / CORPORATE COLOURS
========================================================= */
:root{--green:#087447;--green-dark:#004d32;--green-deep:#003522;--purple:#81268c;--purple-dark:#64166f;--mint:#e8f5ef;--lime:#cbe54c;--cream:#f5f2ec;--ink:#15231b;--muted:#5f6d64;--white:#fff;--line:#dce6df;--shadow:0 22px 65px rgba(4,69,44,.14)}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden}

img{max-width:100%;display:block}

a{text-decoration:none;color:inherit}

button,input,select,textarea{font:inherit}
/* =========================================================
   2. GLOBAL LAYOUT HELPERS
========================================================= */
.site-shell{width:min(1220px,calc(100% - 44px));margin-inline:auto}

.skip-link{position:fixed;left:16px;top:-60px;z-index:9999;background:#000;color:#fff;padding:11px 16px}

.skip-link:focus{top:16px}
/* =========================================================
   3. TOP BAR, HEADER AND NAVIGATION
========================================================= */
.brand-rail{height:12px;background:linear-gradient(103deg,var(--green) 0 73%,var(--purple) 73%)}

.utility-bar{background:#f5f7f5;border-bottom:1px solid #e2e9e4;font-size:.84rem}

.utility-inner{display:flex;align-items:center;justify-content:space-between;min-height:43px}

.utility-links,.utility-right{display:flex;align-items:center;gap:22px}

.utility-links a,.plain-button{font-weight:800;color:#46554c}

.plain-button,.accessibility-launch{border:0;background:none;cursor:pointer}

.phone-link{font-weight:900;color:var(--green)}

.phone-disc{display:inline-grid;place-items:center;width:24px;height:24px;background:var(--green);color:#fff;border-radius:50%;font-size:.7rem}

.accessibility-launch{background:var(--purple);color:#fff;font-weight:800;padding:8px 12px;border-radius:2px}

.site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid rgba(0,0,0,.07);transition:.25s}

.site-header.scrolled{box-shadow:0 12px 36px rgba(0,0,0,.1)}

.nav-wrap{min-height:98px;display:flex;align-items:center;gap:24px}

.brand{width:146px;flex:0 0 146px}

.brand img{width:100%;height:84px;object-fit:contain}

.main-nav{margin-left:auto;display:flex;align-items:stretch;height:98px}

.main-nav>a,.nav-item>button{height:98px;display:flex;align-items:center;border:0;background:transparent;padding:0 13px;font-weight:900;color:#2b3a31;cursor:pointer;white-space:nowrap}

.main-nav>a:hover,.main-nav>a.active,.nav-item>button:hover{color:var(--purple)}

.header-cta{background:var(--green);color:#fff;font-weight:900;padding:14px 20px;border-radius:2px;white-space:nowrap}

.nav-item{position:relative}

.mega-menu,.small-dropdown{position:absolute;top:100%;left:0;background:#fff;box-shadow:0 28px 75px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(12px);transition:.2s}

.nav-item:hover>.mega-menu,.nav-item:hover>.small-dropdown{opacity:1;visibility:visible;transform:none}

.mega-menu{width:850px;left:-235px;display:grid;grid-template-columns:280px 1fr}

.mega-visual{padding:34px;background:linear-gradient(145deg,var(--green),var(--green-dark));color:#fff}

.mega-visual small{letter-spacing:.14em;text-transform:uppercase}

.mega-visual h3{font-size:2rem;line-height:1.05;margin:10px 0}

.mega-visual p{color:#dcebe3}

.mega-visual a{font-weight:900;color:var(--lime)}

.mega-columns{display:grid;grid-template-columns:1fr 1fr;padding:20px}

.mega-columns a{padding:17px;border-bottom:1px solid var(--line)}

.mega-columns strong,.mega-columns span{display:block}

.mega-columns strong{color:var(--green-dark)}

.mega-columns span{font-size:.86rem;color:var(--muted);margin-top:3px}

.small-dropdown{min-width:220px;padding:10px}

.small-dropdown a{display:block;padding:11px 12px;font-weight:800}

.menu-toggle{display:none}
/* =========================================================
   4. NOTICE STRIP
========================================================= */
.notice-strip{background:var(--purple);color:#fff}

.notice-strip .site-shell{min-height:43px;display:flex;align-items:center;justify-content:space-between;font-weight:800}

.notice-strip a{font-size:.9rem}
/* =========================================================
   5. HERO SLIDER
========================================================= */
.hero-slider{position:relative;height:650px;overflow:hidden;background:var(--green-dark)}

.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s ease}

.hero-slide.is-active{opacity:1;visibility:visible}

/* =========================================================
   HERO SLIDER IMAGES
   Upload these files to:
   public_html/assets/images/hero-slide-1.jpg
   public_html/assets/images/hero-slide-2.jpg
   public_html/assets/images/hero-slide-3.jpg
========================================================= */
.slide-image{
    position:absolute;
    inset:0;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    transform:scale(1.03);
    transition:transform 7s ease;
}

.hero-slide.is-active .slide-image{
    transform:scale(1.09);
}

/* Individual hero images */
.slide-one{
    background-image:url('/assets/images/hero-slide-1.jpg');
    background-position:center center;
}

.slide-two{
    background-image:url('/assets/images/hero-slide-2.jpg');
    background-position:center center;
    filter:saturate(.94);
}

.slide-three{
    background-image:url('/assets/images/hero-slide-3.jpg');
    background-position:center center;
    filter:brightness(.98);
}

.slide-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,77,50,.97) 0%,rgba(0,77,50,.91) 35%,rgba(0,77,50,.35) 62%,rgba(0,0,0,.05) 100%)}

.hero-pattern{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.14) 0 2px,transparent 2.4px);background-size:19px 19px;mask-image:linear-gradient(90deg,#000,transparent 52%);pointer-events:none}

.hero-content{position:relative;z-index:3;height:100%;display:flex;align-items:center}

.hero-copy{max-width:610px;color:#fff;padding-bottom:56px}

.hero-small{display:block;font-size:2.05rem;font-weight:800;line-height:1}

.hero-copy h1{font-size:5.7rem;line-height:.88;margin:0;color:var(--lime);letter-spacing:-.065em}

.hero-copy p{font-size:2rem;line-height:1.14;font-weight:900;margin:28px 0 30px}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.button{display:inline-flex;justify-content:center;align-items:center;padding:14px 22px;border:2px solid transparent;font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:.83rem;border-radius:2px;transition:.2s}

.button:hover{transform:translateY(-2px)}

.button-purple{background:var(--purple);color:#fff}

.button-outline{border-color:#fff;color:#fff}

.button-green{background:var(--green);color:#fff}

.button-light{background:#fff;color:var(--purple)}

.slider-controls{position:absolute;z-index:5;left:50%;bottom:75px;transform:translateX(-50%);display:flex;align-items:center;gap:12px}

.slider-controls>button{width:42px;height:42px;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.15);color:#fff;border-radius:50%;cursor:pointer}

.slider-dots{display:flex;gap:8px}

.slider-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}

.slider-dots button.is-active{background:var(--lime);transform:scale(1.25)}

.hero-badge{position:absolute;z-index:4;right:4%;bottom:95px;width:175px;height:175px;border-radius:50%;background:var(--purple);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-7deg);box-shadow:var(--shadow)}

.hero-badge span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}

.hero-badge strong{font-size:1.25rem;line-height:1.13}

.hero-edge{position:absolute;z-index:4;left:0;right:0;bottom:-1px;height:84px;background:#fff;clip-path:polygon(0 72%,70% 72%,75% 0,100% 0,100% 100%,0 100%)}
/* =========================================================
   6. GOALS INTRODUCTION
========================================================= */
.goals-intro{padding:105px 0 125px}

.goals-grid{display:grid;grid-template-columns:245px 1fr 380px;gap:58px;align-items:center}

.hash-heading{display:flex;align-items:flex-start}

.hash-heading span{font-size:6.4rem;line-height:.78;color:var(--purple);font-weight:900}

.hash-heading strong{font-size:2.7rem;line-height:1;color:var(--green);padding-top:5px}

.goals-copy .lead{font-size:1.65rem;line-height:1.35;color:var(--green-dark);font-weight:900}

.goals-copy p{color:#48584f}

.text-link{display:inline-flex;align-items:center;gap:12px;color:var(--purple);font-weight:900;text-transform:uppercase;letter-spacing:.07em;font-size:.8rem}

.text-link span{font-size:1.35rem}

.goals-image{position:relative}

.goals-image:before{content:"";position:absolute;left:-22px;top:-22px;width:84%;height:84%;background:var(--mint);z-index:-1}

.goals-image img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:68% center}

.image-mark{position:absolute;right:-20px;bottom:-18px;width:86px;height:86px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-size:2.6rem;font-weight:900}
/* =========================================================
   7. SERVICES SECTION
========================================================= */
.services-section{position:relative;background:var(--cream);padding:125px 0 135px}

.section-slant{position:absolute;left:0;right:0;height:72px;background:#fff}

.section-slant.top{top:0;clip-path:polygon(0 0,100% 0,100% 20%,31% 20%,26% 100%,0 100%)}

.section-slant.bottom{bottom:0;clip-path:polygon(0 80%,72% 80%,78% 0,100% 0,100% 100%,0 100%)}

.services-title{display:grid;grid-template-columns:1.1fr 1fr;gap:55px;align-items:end;margin-bottom:50px}

.services-title span,.eyebrow{color:var(--purple);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:900}

.services-title h2,.carers-copy h2,.section-heading h2,.contact-copy h2{font-size:3.3rem;line-height:1.03;margin:8px 0;color:var(--green-dark)}

.services-title p{font-size:1.15rem;color:var(--muted)}

.service-rows{display:grid;gap:24px}

.service-row{display:grid;grid-template-columns:1.08fr .92fr;min-height:360px;background:#fff;box-shadow:var(--shadow)}

.service-row.reverse{grid-template-columns:.92fr 1.08fr}

.service-row.reverse .service-media{order:2}

/* =========================================================
   HOMEPAGE SERVICE PHOTOS
   Each service uses its own image file.
========================================================= */
.service-media{
    position:relative;
    background-size:cover;
    background-repeat:no-repeat;
    min-height:360px;
}

.service-media span{
    position:absolute;
    left:24px;
    top:22px;
    background:var(--purple);
    color:#fff;
    width:50px;
    height:50px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:900;
}

/* PHOTO 02: Health + Wellness */
.service-health{
    background-image:url('/assets/images/service-health-wellness.jpg');
    background-position:center center;
}

/* PHOTO 03: Home + Daily Living */
.service-home{
    background-image:url('/assets/images/service-home-daily-living.jpg');
    background-position:center center;
}

/* PHOTO 04: Community Connection */
.service-community{
    background-image:url('/assets/images/service-community-connection.jpg');
    background-position:center center;
}

/* PHOTO 05: Respite + Transition */
.service-respite{
    background-image:url('/assets/images/service-respite-transition.jpg');
    background-position:center center;
}

/* PHOTO 06: Specialised Support */
.service-special{
    background-image:url('/assets/images/service-specialised-support.jpg');
    background-position:center center;
}

.service-info{padding:55px 58px;display:flex;flex-direction:column;justify-content:center;border-top:8px solid var(--green)}

.service-info.purple{background:var(--purple);color:#fff;border-color:var(--lime)}

.service-info.green{background:var(--green);color:#fff;border-color:var(--purple)}

.service-info h3{font-size:2.15rem;line-height:1.06;margin:0 0 14px}

.service-info p{color:var(--muted);font-size:1.05rem}

.service-info.purple p,.service-info.green p{color:#fff}

.service-info a{margin-top:12px;font-weight:900;text-transform:uppercase;font-size:.78rem;letter-spacing:.07em;color:var(--purple)}

.service-info.purple a,.service-info.green a{color:#fff}
/* =========================================================
   8. FAMILIES AND CARERS SECTION
========================================================= */
.carers-section{padding:120px 0}

.carers-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:75px;align-items:center}

/* PHOTO 07: Families + Carers */
.carers-photo{
    height:610px;
    background-image:url('/assets/images/families-carers.jpg');
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
}

.photo-stamp{position:absolute;left:-32px;bottom:42px;width:320px;background:var(--purple);color:#fff;padding:25px 30px}

.photo-stamp span,.photo-stamp strong{display:block}

.photo-stamp span{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase}

.photo-stamp strong{font-size:1.6rem;line-height:1.13}

.carers-copy p{color:var(--muted)}

.carers-copy ul{list-style:none;padding:0;margin:25px 0 30px}

.carers-copy li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--line);font-weight:800}

.carers-copy li:before{content:"✓";position:absolute;left:0;color:var(--purple)}
/* =========================================================
   9. COMMITMENT / IMPACT SECTION
========================================================= */
.commitment{position:relative;overflow:hidden;background:var(--green-dark);color:#fff;padding:115px 0}

.commitment-pattern{position:absolute;inset:0;background:radial-gradient(circle at 92% 18%,rgba(255,255,255,.05) 0 22%,transparent 22.5%),radial-gradient(circle at 92% 18%,transparent 0 33%,rgba(255,255,255,.04) 33.5% 48%,transparent 48.5%)}

.commitment-grid{position:relative;z-index:2;display:grid;grid-template-columns:210px 1fr 285px;gap:60px}

.hash-heading.light span{color:var(--lime)}

.hash-heading.light strong{color:#fff}

.commitment-copy h2{font-size:3.7rem;line-height:1;margin:0 0 25px;color:var(--lime)}

.commitment-copy p{color:#dce8e1}

.text-link.light{color:#fff}

.commitment-stats{display:grid;gap:18px}

.commitment-stats div{padding:20px 22px;background:rgba(255,255,255,.07);border-left:4px solid var(--purple)}

.commitment-stats strong,.commitment-stats span{display:block}

.commitment-stats strong{font-size:2.3rem;color:var(--lime)}

.commitment-stats span{font-size:.9rem}
/* =========================================================
   10. STORIES AND RESOURCES
========================================================= */
.stories-section{padding:115px 0}

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

.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

.story-card{background:#fff;box-shadow:var(--shadow)}

/* =========================================================
   STORY AND RESOURCE PHOTOS
   Each card uses its own image file.
========================================================= */
.story-image{
    height:245px;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
}

/* PHOTO 08: Training */
.story-a{
    background-image:url('/assets/images/story-training.jpg');
    background-position:center center;
}

/* PHOTO 09: Community Story */
.story-b{
    background-image:url('/assets/images/story-community.jpg');
    background-position:center center;
}

/* PHOTO 10: Family Guide */
.story-c{
    background-image:url('/assets/images/story-family-guide.jpg');
    background-position:center center;
}

.story-image span{position:absolute;left:18px;top:18px;background:var(--purple);color:#fff;padding:7px 11px;font-size:.73rem;text-transform:uppercase;font-weight:900}

.story-body{padding:25px}

.story-body small{color:var(--purple);font-weight:900;text-transform:uppercase;letter-spacing:.1em}

.story-body h3{font-size:1.45rem;line-height:1.15;color:var(--green-dark)}

.story-body p{color:var(--muted)}

.story-body a{font-weight:900;color:var(--purple)}
/* =========================================================
   11. CAREERS CALL-TO-ACTION
========================================================= */
.careers-strip{background:var(--purple);color:#fff;padding:58px 0}

.careers-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}

.careers-inner span{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:900}

.careers-inner h2{font-size:2.55rem;line-height:1.08;margin:8px 0}
/* =========================================================
   12. CONTACT SECTION
========================================================= */
.contact-section{padding:115px 0;background:var(--mint)}

.contact-grid{display:grid;grid-template-columns:.83fr 1.17fr;gap:70px}

.contact-copy p{color:var(--muted)}

.contact-list{display:grid;gap:14px;margin-top:32px}

.contact-list a{background:#fff;padding:18px 20px;border-left:5px solid var(--purple)}

.contact-list span,.contact-list strong{display:block}

.contact-list span{font-size:.72rem;text-transform:uppercase;color:var(--purple);font-weight:900;letter-spacing:.1em}

.contact-list strong{font-size:1.2rem;color:var(--green-dark)}

.contact-form{background:#fff;padding:34px;box-shadow:var(--shadow)}

.contact-form label{display:block;font-weight:800;color:var(--green-dark);margin-bottom:18px}

.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:13px 14px;border:1px solid #cfdcd3;margin-top:7px;background:#fff}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* =========================================================
   13. FOOTER
========================================================= */
.site-footer{position:relative;background:var(--green-deep);color:#fff;padding:105px 0 25px}

.footer-slope{position:absolute;top:0;left:0;right:0;height:72px;background:var(--purple);clip-path:polygon(0 0,67% 0,73% 100%,100% 100%,100% 0)}

.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;gap:45px}

.footer-brand img{width:155px;background:#fff}

.footer-brand p{font-size:1.25rem;color:var(--lime);font-weight:800}

.footer-grid h3{color:var(--lime);text-transform:lowercase}

.footer-grid>div>a{display:block;padding:5px 0;color:#e1ebe5}

.socials{display:flex;gap:9px}

.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center}

.newsletter{margin-top:22px}

.newsletter label{display:block;font-weight:800;margin-bottom:8px}

.newsletter div{display:flex}

.newsletter input{min-width:0;flex:1;padding:11px;border:0}

.newsletter button{width:44px;border:0;background:var(--purple);color:#fff}

.footer-bottom{margin-top:52px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;font-size:.84rem;color:#bdcdc4}
/* =========================================================
   14. SEARCH AND ACCESSIBILITY PANELS
========================================================= */
.search-panel{position:fixed;inset:0;z-index:2000;background:rgba(0,53,34,.97);display:grid;place-items:center;color:#fff;opacity:0;visibility:hidden;transition:.25s}

.search-panel.open{opacity:1;visibility:visible}

.panel-close{position:absolute;right:28px;top:20px;border:0;background:none;color:#fff;font-size:3rem;cursor:pointer}

.search-inner{width:min(760px,calc(100% - 40px))}

.search-inner>span{font-size:2rem;font-weight:900}

.search-inner form{display:flex;margin-top:20px}

.search-inner input{flex:1;padding:17px;border:0}

.search-inner button{border:0;background:var(--purple);color:#fff;font-weight:900;padding:0 24px}

.accessibility-panel{position:fixed;right:20px;top:115px;width:280px;background:#fff;z-index:2200;box-shadow:0 20px 65px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateX(20px);transition:.2s}

.accessibility-panel.open{opacity:1;visibility:visible;transform:none}

.accessibility-head{display:flex;justify-content:space-between;background:var(--purple);color:#fff;padding:14px}

.accessibility-head button{border:0;background:none;color:#fff;font-size:1.4rem}

.accessibility-panel>button{display:block;width:100%;padding:12px 14px;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;font-weight:800;cursor:pointer}
/* =========================================================
   15. ANIMATION AND ACCESSIBILITY STATES
========================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}

.reveal.visible{opacity:1;transform:none}

.a11y-grayscale{filter:grayscale(1)}

.a11y-underline a{text-decoration:underline!important}

.a11y-readable{font-family:Verdana,Arial,sans-serif}

.a11y-contrast,.a11y-contrast *{background:#000!important;color:#fff!important;border-color:#fff!important}
/* =========================================================
   16. ADMIN / LOGIN INTERFACE
========================================================= */
.admin-body,.dashboard-body{background:#f4f7f5}

.login-shell{min-height:100vh;display:grid;place-items:center;padding:30px}

.login-card{background:#fff;width:min(440px,100%);padding:35px;box-shadow:var(--shadow)}

.login-card img{width:135px;margin:auto}

.login-card label{display:block;font-weight:700;margin:14px 0}

.login-card input{width:100%;padding:12px;border:1px solid var(--line)}

.btn{display:inline-flex;padding:12px 18px;border:0;font-weight:800}

.btn-primary{background:var(--green);color:#fff}

.alert{background:#fdeaea;color:#8a2323;padding:10px}

.dashboard-body{display:flex;min-height:100vh}

.admin-sidebar{width:240px;background:var(--green-dark);color:#fff;padding:25px}

.admin-sidebar img{width:130px;background:#fff;margin-bottom:25px}

.admin-sidebar a{display:block;padding:11px}

.admin-sidebar a.active{background:var(--purple)}

.admin-main{flex:1;padding:35px}

.admin-main>header{display:flex;justify-content:space-between}

.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0}

.admin-stats article,.admin-panel{background:#fff;padding:22px}

.admin-stats strong{display:block;font-size:2rem;color:var(--green)}

.table-wrap{overflow:auto}

table{width:100%;border-collapse:collapse}

th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}

.status{background:var(--mint);padding:5px 8px}

.thank-you{max-width:700px;margin:70px auto;text-align:center;padding:50px;background:var(--mint)}

/* =========================================================
   17. TABLET AND SMALL LAPTOP RESPONSIVENESS
========================================================= */
@media(max-width:1080px){.utility-links a:nth-child(-n+2){display:none}

.nav-wrap{min-height:82px}

.brand{width:122px;flex-basis:122px}

.brand img{height:68px}

.menu-toggle{display:flex;margin-left:auto;border:0;background:none;flex-direction:column;gap:4px;align-items:center;cursor:pointer}

.menu-toggle span{width:28px;height:2px;background:var(--green)}

.menu-toggle b{font-size:.68rem}

.main-nav{position:fixed;left:0;right:0;top:133px;height:calc(100vh - 133px);display:block;background:#fff;padding:18px 25px;overflow:auto;transform:translateX(100%);transition:.25s}

.main-nav.open{transform:none}

.main-nav>a,.nav-item>button{height:auto;width:100%;padding:14px 0;border-bottom:1px solid var(--line);justify-content:space-between}

.mega-menu,.small-dropdown{position:static;width:auto!important;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none}

.nav-item.expanded>.mega-menu,.nav-item.expanded>.small-dropdown{display:block}

.mega-menu{grid-template-columns:1fr}

.mega-visual{display:none}

.mega-columns{grid-template-columns:1fr;padding:8px}

.header-cta{display:none}

.goals-grid{grid-template-columns:180px 1fr}

.goals-image{grid-column:2}

.commitment-grid{grid-template-columns:160px 1fr}

.commitment-stats{grid-column:2}

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

.admin-stats{grid-template-columns:1fr 1fr}

}

/* =========================================================
   18. MOBILE RESPONSIVENESS
========================================================= */
@media(max-width:760px){.site-shell{width:min(100% - 28px,1220px)}

.brand-rail{height:8px}

.utility-inner{min-height:39px}

.utility-links{display:none}

.utility-right{width:100%;justify-content:space-between}

.notice-strip .site-shell{min-height:54px;font-size:.77rem;gap:12px}

.hero-slider{height:575px}

.slide-one{background-position:67% 15%}

.slide-two{background-position:70% center}

.slide-three{background-position:56% 70%}

.slide-overlay{background:linear-gradient(90deg,rgba(0,77,50,.95),rgba(0,77,50,.68) 72%,rgba(0,77,50,.3))}

.hero-copy{padding-bottom:50px}

.hero-small{font-size:1.5rem}

.hero-copy h1{font-size:3.85rem}

.hero-copy p{font-size:1.45rem}

.hero-badge{width:124px;height:124px;right:-12px;bottom:78px}

.hero-badge strong{font-size:.92rem}

.slider-controls{bottom:34px}

.hero-edge{height:58px}

.goals-intro{padding:75px 0 90px}

.goals-grid{grid-template-columns:1fr;gap:30px}

.goals-image{grid-column:auto}

.hash-heading span{font-size:4.7rem}

.hash-heading strong{font-size:2rem}

.services-section{padding:95px 0}

.services-title{grid-template-columns:1fr;gap:10px}

.services-title h2,.carers-copy h2,.section-heading h2,.contact-copy h2{font-size:2.35rem}

.service-row,.service-row.reverse{grid-template-columns:1fr}

.service-row.reverse .service-media{order:0}

.service-media{min-height:280px}

.service-info{padding:34px 28px}

.service-info h3{font-size:1.8rem}

.carers-section,.stories-section,.contact-section{padding:78px 0}

.carers-grid,.contact-grid{grid-template-columns:1fr;gap:38px}

.carers-photo{height:450px}

.photo-stamp{left:0;width:270px}

.commitment{padding:80px 0}

.commitment-grid{grid-template-columns:1fr;gap:30px}

.commitment-stats{grid-column:auto}

.commitment-copy h2{font-size:2.7rem}

.section-heading{display:block}

.section-heading>.text-link{margin-top:18px}

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

.careers-inner{display:block}

.careers-inner h2{font-size:2rem}

.careers-inner .button{margin-top:18px}

.form-row{grid-template-columns:1fr}

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

.footer-bottom{display:block}

.dashboard-body{display:block}

.admin-sidebar{width:100%}

.admin-main{padding:20px}

.admin-stats{grid-template-columns:1fr}

.main-nav{top:129px;height:calc(100vh - 129px)}

}


/*
====================================================================
19. FINAL HEADER ALIGNMENT FIX
Keeps the logo, menu and Request Support button aligned inside the
same centered site container.
====================================================================
*/

.site-header {
    overflow: visible;
}

.site-header .nav-wrap {
    /* Do not set width:100%; .site-shell already controls centering. */
    min-height: 98px;
    display: flex;
    align-items: center;
    gap: 18px;
    overflow: visible;
}

/* =========================================================
   LOGO
========================================================= */
.site-header .brand {
    width: 148px;
    min-width: 148px;
    flex: 0 0 148px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
}

.site-header .brand img {
    width: 100%;
    max-width: 148px;
    height: 82px;
    object-fit: contain;
    object-position: left center;
    background: transparent;
}

/* =========================================================
   DESKTOP NAVIGATION
========================================================= */
.site-header .main-nav {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    height: 98px;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    overflow: visible;
}

.site-header .main-nav > a,
.site-header .nav-item > button {
    position: relative;
    height: 98px;
    padding: 0 10px;
    font-size: .86rem;
    line-height: 1.15;
    overflow: hidden;
    transition:
        color .25s ease,
        transform .25s ease;
}

.site-header .main-nav > a > span,
.site-header .nav-item > button > span:first-child {
    white-space: nowrap;
}

/* Animated underline */
.site-header .main-nav > a::after,
.site-header .nav-item > button::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 21px;
    height: 3px;
    background: var(--purple);
    border-radius: 50px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .28s ease;
}

.site-header .main-nav > a:hover,
.site-header .main-nav > a:focus-visible,
.site-header .nav-item > button:hover,
.site-header .nav-item > button:focus-visible {
    color: var(--purple);
    transform: translateY(-1px);
}

.site-header .main-nav > a:hover::after,
.site-header .main-nav > a:focus-visible::after,
.site-header .main-nav > a.active::after,
.site-header .nav-item > button:hover::after,
.site-header .nav-item > button:focus-visible::after,
.site-header .nav-item:hover > button::after {
    transform: scaleX(1);
}

/* =========================================================
   DROPDOWN ICON
========================================================= */
.dropdown-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-left: 5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
}

.nav-item:hover > button .dropdown-icon,
.nav-item:focus-within > button .dropdown-icon,
.nav-item.expanded > button .dropdown-icon {
    transform: rotate(180deg);
}

/* =========================================================
   DROPDOWN ANIMATION
========================================================= */
.site-header .mega-menu,
.site-header .small-dropdown {
    transform: translateY(14px) scale(.988);
    transform-origin: top center;
    transition:
        opacity .24s ease,
        visibility .24s ease,
        transform .24s ease;
}

.site-header .nav-item:hover > .mega-menu,
.site-header .nav-item:hover > .small-dropdown,
.site-header .nav-item:focus-within > .mega-menu,
.site-header .nav-item:focus-within > .small-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.site-header .mega-columns a,
.site-header .small-dropdown a {
    transition:
        background-color .22s ease,
        color .22s ease,
        padding-left .22s ease;
}

.site-header .mega-columns a:hover,
.site-header .mega-columns a:focus-visible {
    background: var(--mint);
    padding-left: 22px;
}

.site-header .small-dropdown a:hover,
.site-header .small-dropdown a:focus-visible {
    background: var(--mint);
    color: var(--purple);
    padding-left: 18px;
}

/* =========================================================
   REQUEST SUPPORT BUTTON
========================================================= */
.site-header .header-cta {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-width: 150px;
    min-height: 50px;
    padding: 13px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
    background: var(--green);
    color: #fff;
    border-radius: 2px;
    font-size: .76rem;
    line-height: 1;
    transition:
        color .3s ease,
        transform .25s ease,
        box-shadow .3s ease;
}

.site-header .header-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--purple);
    transform: translateX(-101%);
    transition: transform .32s ease;
}

.site-header .header-cta span {
    position: relative;
    z-index: 1;
}

.site-header .header-cta-arrow {
    transition: transform .25s ease;
}

.site-header .header-cta:hover,
.site-header .header-cta:focus-visible {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(100, 22, 111, .28);
}

.site-header .header-cta:hover::before,
.site-header .header-cta:focus-visible::before {
    transform: translateX(0);
}

.site-header .header-cta:hover .header-cta-arrow,
.site-header .header-cta:focus-visible .header-cta-arrow {
    transform: translateX(5px);
}

/* =========================================================
   TOP BAR LINK ANIMATION
========================================================= */
.utility-links a,
.plain-button {
    position: relative;
    transition: color .22s ease;
}

.utility-links a::after,
.plain-button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--purple);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.utility-links a:hover,
.plain-button:hover {
    color: var(--purple);
}

.utility-links a:hover::after,
.plain-button:hover::after {
    transform: scaleX(1);
}

/* =========================================================
   LAPTOP / TABLET
   Switch to the mobile menu before the desktop row becomes crowded.
========================================================= */
@media (max-width: 1120px) {
    .site-header .nav-wrap {
        min-height: 82px;
        gap: 14px;
    }

    .site-header .brand {
        width: 136px;
        min-width: 136px;
        flex-basis: 136px;
    }

    .site-header .brand img {
        max-width: 136px;
        height: 70px;
    }

    .menu-toggle {
        display: flex;
        margin-left: auto;
        border: 0;
        background: none;
        flex-direction: column;
        gap: 4px;
        align-items: center;
        cursor: pointer;
    }

    .menu-toggle span {
        width: 28px;
        height: 2px;
        background: var(--green);
    }

    .menu-toggle b {
        font-size: .68rem;
    }

    .site-header .main-nav {
        position: fixed;
        left: 0;
        right: 0;
        top: 133px;
        z-index: 999;
        height: calc(100vh - 133px);
        display: block;
        background: #fff;
        padding: 18px 25px 35px;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(100%);
        transition: transform .25s ease;
    }

    .site-header .main-nav.open {
        transform: translateX(0);
    }

    .site-header .main-nav > a,
    .site-header .nav-item > button {
        width: 100%;
        height: auto;
        padding: 15px 0;
        border-bottom: 1px solid var(--line);
        justify-content: space-between;
        font-size: .96rem;
        overflow: visible;
    }

    .site-header .main-nav > a::after,
    .site-header .nav-item > button::after {
        left: 0;
        right: auto;
        bottom: 5px;
        width: 48px;
    }

    .site-header .main-nav > a:hover,
    .site-header .main-nav > a:focus-visible,
    .site-header .nav-item > button:hover,
    .site-header .nav-item > button:focus-visible {
        transform: none;
    }

    .site-header .mega-menu,
    .site-header .small-dropdown {
        position: static;
        width: auto !important;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
    }

    .site-header .nav-item.expanded > .mega-menu,
    .site-header .nav-item.expanded > .small-dropdown {
        display: block;
    }

    .site-header .mega-menu {
        grid-template-columns: 1fr;
    }

    .site-header .mega-visual {
        display: none;
    }

    .site-header .mega-columns {
        grid-template-columns: 1fr;
        padding: 8px;
    }

    .site-header .header-cta {
        min-width: 145px;
        padding: 12px 14px;
        font-size: .73rem;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 760px) {
    .site-header .nav-wrap {
        gap: 10px;
    }

    .site-header .brand {
        width: 118px;
        min-width: 118px;
        flex-basis: 118px;
    }

    .site-header .brand img {
        max-width: 118px;
        height: 62px;
    }

    .site-header .header-cta {
        min-width: 0;
        padding: 11px 12px;
        font-size: .67rem;
    }

    .site-header .header-cta-arrow {
        display: none;
    }

    .site-header .main-nav {
        top: 129px;
        height: calc(100vh - 129px);
    }
}

@media (max-width: 480px) {
    .site-header .brand {
        width: 104px;
        min-width: 104px;
        flex-basis: 104px;
    }

    .site-header .brand img {
        max-width: 104px;
        height: 56px;
    }

    .site-header .header-cta {
        padding: 10px 8px;
        font-size: .60rem;
        letter-spacing: .01em;
    }

    .menu-toggle {
        margin-left: 0;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .site-header .main-nav > a,
    .site-header .nav-item > button,
    .dropdown-icon,
    .site-header .mega-menu,
    .site-header .small-dropdown,
    .site-header .mega-columns a,
    .site-header .small-dropdown a,
    .site-header .header-cta,
    .site-header .header-cta::before,
    .site-header .header-cta-arrow {
        transition: none !important;
    }
}


/*
====================================================================
20. ENHANCED FOOTER
Logo file:
public_html/assets/images/Juniper-footer.png
====================================================================
*/

.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .055) 0 2px, transparent 2.5px) 0 0 / 22px 22px,
        var(--green-deep);
    color: #fff;
    padding: 112px 0 28px;
}

.site-footer::after {
    content: "";
    position: absolute;
    right: -170px;
    bottom: -210px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 65px rgba(255, 255, 255, .025),
        0 0 0 130px rgba(255, 255, 255, .018);
    pointer-events: none;
}

.footer-slope {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: var(--purple);
    clip-path: polygon(0 0, 67% 0, 73% 100%, 100% 100%, 100% 0);
}

.footer-grid,
.footer-bottom {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1.18fr;
    gap: 52px;
    align-items: start;
}

/* =========================================================
   FOOTER LOGO
========================================================= */
.footer-brand {
    min-width: 0;
}

.footer-logo-link {
    display: inline-flex;
    max-width: 240px;
    background: transparent;
    transition:
        transform .3s ease,
        filter .3s ease;
}

.footer-logo-link:hover,
.footer-logo-link:focus-visible {
    transform: translateY(-4px);
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .22));
}

.footer-brand img {
    width: 100%;
    max-width: 240px;
    height: 122px;
    object-fit: contain;
    object-position: left center;
    background: transparent;
}

.footer-brand p {
    max-width: 280px;
    margin: 20px 0 24px;
    color: var(--lime);
    font-size: 1.22rem;
    line-height: 1.35;
    font-weight: 900;
}

/* =========================================================
   FOOTER HEADINGS
========================================================= */
.footer-grid h3 {
    position: relative;
    display: inline-block;
    margin: 0 0 24px;
    padding-bottom: 10px;
    color: var(--lime);
    font-size: 1.2rem;
    line-height: 1.2;
    text-transform: none;
}

.footer-grid h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    background: var(--purple);
    border-radius: 50px;
}

/* =========================================================
   ANIMATED FOOTER TEXT LINKS
========================================================= */
.footer-column {
    min-width: 0;
}

.footer-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
    color: #e1ebe5;
    line-height: 1.4;
    transition:
        color .24s ease,
        padding-left .24s ease;
}

.footer-link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--lime);
    transition: width .28s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: #fff;
    padding-left: 8px;
}

.footer-link:hover::before,
.footer-link:focus-visible::before {
    width: 42px;
}

.footer-link-arrow {
    flex: 0 0 auto;
    color: var(--lime);
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity .24s ease,
        transform .24s ease;
}

.footer-link:hover .footer-link-arrow,
.footer-link:focus-visible .footer-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================================
   COLOURFUL SOCIAL MEDIA ICONS
========================================================= */
.socials {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-link {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .17);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        filter .28s ease;
}

.social-link::after {
    content: "";
    position: absolute;
    inset: -35%;
    background: rgba(255, 255, 255, .28);
    transform: translateX(-135%) rotate(20deg);
    transition: transform .48s ease;
}

.social-link:hover,
.social-link:focus-visible {
    transform: translateY(-6px) scale(1.07) rotate(-3deg);
    box-shadow: 0 15px 28px rgba(0, 0, 0, .26);
    filter: saturate(1.12);
}

.social-link:hover::after,
.social-link:focus-visible::after {
    transform: translateX(135%) rotate(20deg);
}

.social-link svg {
    position: relative;
    z-index: 1;
    width: 21px;
    height: 21px;
    fill: currentColor;
    stroke: currentColor;
}

.social-instagram svg {
    fill: none;
    stroke-width: 2;
}

.social-facebook {
    background: #1877f2;
}

.social-instagram {
    background:
        radial-gradient(circle at 30% 107%, #fdf497 0 5%, #fdf497 5% 9%, #fd5949 45%, #d6249f 62%, #285aeb 90%);
}

.social-linkedin {
    background: #0a66c2;
}

/* =========================================================
   CONTACT LINKS
========================================================= */
.footer-location {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    color: #dce8e1;
}

.footer-location-icon,
.footer-contact-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    color: var(--lime);
}

.footer-contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 0;
    color: #e1ebe5;
    overflow-wrap: anywhere;
    transition:
        color .24s ease,
        transform .24s ease;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
    color: var(--lime);
    transform: translateX(6px);
}

/* =========================================================
   NEWSLETTER
========================================================= */
.newsletter {
    margin-top: 24px;
}

.newsletter label {
    display: block;
    margin-bottom: 9px;
    color: #fff;
    font-weight: 900;
}

.newsletter-control {
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 3px;
    background: #fff;
    transition:
        border-color .24s ease,
        box-shadow .24s ease,
        transform .24s ease;
}

.newsletter-control:focus-within {
    border-color: var(--lime);
    box-shadow: 0 0 0 4px rgba(203, 229, 76, .14);
    transform: translateY(-2px);
}

.newsletter input {
    min-width: 0;
    flex: 1;
    padding: 12px 14px;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: #fff;
}

.newsletter button {
    width: 48px;
    flex: 0 0 48px;
    border: 0;
    background: var(--purple);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    transition:
        background-color .24s ease,
        transform .24s ease;
}

.newsletter button:hover,
.newsletter button:focus-visible {
    background: var(--lime);
    color: var(--green-deep);
}

.newsletter button:hover span,
.newsletter button:focus-visible span {
    display: inline-block;
    transform: translateX(3px);
}

/* =========================================================
   FOOTER BOTTOM AND LEGAL LINKS
========================================================= */
.footer-bottom {
    margin-top: 58px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #bdcdc4;
    font-size: .84rem;
}

.footer-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-legal a {
    position: relative;
    color: #dce8e1;
    transition: color .22s ease;
}

.footer-legal a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--lime);
}

.footer-legal a:hover::after,
.footer-legal a:focus-visible::after {
    transform: scaleX(1);
}

/* =========================================================
   FOOTER RESPONSIVENESS
========================================================= */
@media (max-width: 1080px) {
    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
    }

    .footer-contact {
        grid-column: 1 / -1;
        max-width: 580px;
    }
}

@media (max-width: 760px) {
    .site-footer {
        padding: 96px 0 24px;
    }

    .footer-slope {
        height: 58px;
        clip-path: polygon(0 0, 62% 0, 74% 100%, 100% 100%, 100% 0);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-contact {
        grid-column: auto;
        max-width: none;
    }

    .footer-brand img {
        max-width: 210px;
        height: 108px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .footer-logo-link {
        max-width: 190px;
    }

    .footer-brand img {
        max-width: 190px;
        height: 96px;
    }

    .social-link {
        width: 42px;
        height: 42px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .footer-logo-link,
    .footer-link,
    .footer-link::before,
    .footer-link-arrow,
    .social-link,
    .social-link::after,
    .footer-contact-link,
    .newsletter-control,
    .newsletter button,
    .footer-legal a,
    .footer-legal a::after {
        transition: none !important;
    }
}

/*
====================================================================
21. HOMEPAGE DECORATIVE SYMBOLS + COMMITMENT IMAGE BACKGROUND
====================================================================
*/
.decor-section{position:relative;overflow:hidden;isolation:isolate}
.decor-section>.site-shell{position:relative;z-index:3}
.section-symbols{position:absolute!important;inset:0;z-index:1;overflow:hidden;pointer-events:none;user-select:none}
.section-symbols span{position:absolute;display:block;color:rgba(57,68,61,.075);font-family:Arial,Helvetica,sans-serif;font-weight:900;line-height:.72;letter-spacing:-.08em;pointer-events:none}
.section-symbols .symbol-left{left:-34px;top:50%;font-size:clamp(9rem,18vw,18rem);transform:translateY(-50%) rotate(-8deg)}
.section-symbols .symbol-right{right:7%;top:47%;font-size:clamp(8rem,16vw,16rem);transform:translateY(-50%) rotate(8deg)}
.section-symbols .symbol-bottom{right:-42px;bottom:-28px;font-size:clamp(9rem,17vw,17rem);transform:rotate(10deg)}
.section-symbols.symbols-light span{color:rgba(255,255,255,.065)}
.goals-intro .section-symbols .symbol-left{top:54%}
.services-section .section-symbols .symbol-right{top:24%;right:3%}
.services-section .section-symbols .symbol-bottom{bottom:1%}
.carers-section .section-symbols .symbol-left{left:-55px}
.commitment .section-symbols .symbol-right{right:4%;top:42%}
.stories-section .section-symbols .symbol-bottom{right:-25px;bottom:-12px}
.careers-strip .section-symbols .symbol-left{left:2%;top:48%;font-size:clamp(7rem,12vw,11rem)}
.careers-strip .section-symbols .symbol-right{right:31%;top:48%;font-size:clamp(7rem,11vw,10rem)}
.careers-strip .section-symbols .symbol-bottom{right:-18px;bottom:-20px;font-size:clamp(7rem,11vw,10rem)}
.contact-section .section-symbols .symbol-left{left:-46px}
.contact-section .section-symbols .symbol-bottom{right:-36px;bottom:-28px}

/*
COMMITMENT BACKGROUND IMAGE TO REPLACE:
public_html/assets/images/commitment-background.jpg
*/
.commitment{background:linear-gradient(90deg,rgba(0,77,50,.96) 0%,rgba(0,77,50,.91) 45%,rgba(0,53,34,.84) 100%),url('/assets/images/commitment-background.jpg') center center/cover no-repeat}
.commitment-pattern{position:absolute!important;inset:0;z-index:0;background:linear-gradient(135deg,rgba(8,116,71,.12),rgba(0,53,34,.18));pointer-events:none}
.commitment-grid{position:relative;z-index:3}
.services-section .section-slant{z-index:2}

@media(max-width:760px){
.section-symbols span{color:rgba(57,68,61,.055)}
.section-symbols.symbols-light span{color:rgba(255,255,255,.05)}
.section-symbols .symbol-left{left:-28px;font-size:clamp(7rem,32vw,11rem)}
.section-symbols .symbol-right{right:-6px;top:38%;font-size:clamp(6rem,29vw,10rem)}
.section-symbols .symbol-bottom{right:-28px;bottom:-16px;font-size:clamp(7rem,31vw,11rem)}
.services-section .section-symbols .symbol-right{top:15%}
.careers-strip .section-symbols .symbol-left,.careers-strip .section-symbols .symbol-right,.careers-strip .section-symbols .symbol-bottom{font-size:clamp(5rem,24vw,8rem)}
}
@media(max-width:480px){.section-symbols .symbol-left{left:-24px}.section-symbols .symbol-right{right:-18px}.section-symbols .symbol-bottom{right:-22px;bottom:-10px}}
@media(prefers-reduced-motion:reduce){.section-symbols span{transform:none!important}}