/* Karuna extras: rules kept separate from acacia-garden.css so edits to that file cannot wipe them */

/* gold ring around the sun in the Services and Wellbeing heading logo */
.SV_hero::before,.WB_hero::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%202000%201495'%3E%3Cdefs%3E%3CclipPath%20id%3D'l'%3E%3Cpath%20d%3D'M145%20115C640%20180%201050%20560%201185%20910C1262%201110%201292%201300%201297%201495H700C420%201350%20190%201100%20130%20700C96%20480%20105%20280%20145%20115Z'%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D'r'%3E%3Cpath%20d%3D'M870%201495C880%201250%201000%201030%201185%20912C1370%20790%201600%20745%201885%20763C1850%20950%201760%201130%201650%201245C1560%201350%201460%201430%201340%201495Z'%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20fill%3D'%23fff'%3E%3Cpath%20d%3D'M145%20115C640%20180%201050%20560%201185%20910C1262%201110%201292%201300%201297%201495H700C420%201350%20190%201100%20130%20700C96%20480%20105%20280%20145%20115Z'%20fill-opacity%3D'0.045'%2F%3E%3Cg%20clip-path%3D'url(%23l)'%3E%3Cpath%20d%3D'M100%20488C560%20488%20880%201000%20955%201495H0V488Z'%20fill-opacity%3D'0.04'%2F%3E%3Cpath%20d%3D'M160%20845C560%20845%20850%201100%20900%201495H0V845Z'%20fill-opacity%3D'0.045'%2F%3E%3Cpath%20d%3D'M335%201180C560%201175%20720%201330%20770%201495H0V1180Z'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M870%201495C880%201250%201000%201030%201185%20912C1370%20790%201600%20745%201885%20763C1850%20950%201760%201130%201650%201245C1560%201350%201460%201430%201340%201495Z'%20fill-opacity%3D'0.05'%2F%3E%3Cg%20clip-path%3D'url(%23r)'%3E%3Cpath%20d%3D'M1795%201028C1500%20980%201180%201150%201000%201495H2000V1028Z'%20fill-opacity%3D'0.045'%2F%3E%3Cpath%20d%3D'M1650%201245C1480%201200%201260%201260%201130%201495H2000V1245Z'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'1338'%20cy%3D'317'%20r%3D'230'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'1338'%20cy%3D'317'%20r%3D'262'%20fill%3D'none'%20stroke%3D'%23C9914D'%20stroke-opacity%3D'.7'%20stroke-width%3D'5'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}

/* Services: cream fades through pale blue into the teal of What we offer */
body .SV_services{background:linear-gradient(to bottom,#F8F0EB 0,#DCE6E6 80px,#9DB9B8 150px,#5E8583 200px,#466F6D 240px,#466F6D 100%);padding-top:calc(var(--sec-pad, 5.5rem) + 110px)}

/* Karuna Difference: no ribbon seam; the warm white above fades softly into the blush; cloud imprints start at the top edge */
.difference::before{display:none!important}
body .difference{background:linear-gradient(to bottom,#F7F1EE 0,#EFF1E8 120px,#E8EEE3 240px,#E8EEE3 100%)}
.difference::after{top:0!important}

/* phones: root imprints on the rose next-step bands sized to the screen width, not the tall section height */
@media (max-width:760px){
  body .start::before,body .TM_cta::before,body .SV_cta::before,body .MH_cta::before,body .WB_cta::before,body .EP_cta::before,body .SF_cta::before,
  body .start::after,body .TM_cta::after,body .SV_cta::after,body .MH_cta::after,body .WB_cta::after,body .EP_cta::after,body .SF_cta::after{-webkit-mask-size:min(92vw,420px) auto!important;mask-size:min(92vw,420px) auto!important}
  body .CT_cta::before,body .CT_cta::after{-webkit-mask-size:min(80vw,380px) auto!important;mask-size:min(80vw,380px) auto!important}
}

/* hero "Begin" cue: larger, lower, softly lit, with a gold line and chevron that breathe (kept moving despite the site's reduced-motion rule) */
.hero .scroll-cue{bottom:.9rem;font-size:.8rem;font-weight:500;letter-spacing:.3em;color:rgba(255,246,230,.62);gap:.35rem;
  text-shadow:0 0 8px rgba(246,221,168,.6),0 1px 8px rgba(20,24,40,.6);
  animation:kxCueGlow 4.5s ease-in-out infinite!important;animation-duration:4.5s!important;animation-iteration-count:infinite!important}
.hero .scroll-cue .line{width:1.5px;height:28px;transform-origin:top;background:linear-gradient(to bottom,#F6DDA8,rgba(246,221,168,0));
  animation:cue 3s ease-in-out infinite!important;animation-duration:3s!important;animation-iteration-count:infinite!important}
.hero .scroll-cue::after{content:"";width:11px;height:11px;margin-top:-13px;border-right:2px solid #F9E4B4;border-bottom:2px solid #F9E4B4;
  filter:drop-shadow(0 0 4px rgba(246,221,168,.9)) drop-shadow(0 1px 3px rgba(20,24,40,.45));
  animation:kxCueArrow 3s ease-in-out infinite!important;animation-duration:3s!important;animation-iteration-count:infinite!important}
@keyframes kxCueArrow{0%,100%{transform:translateY(-2px) rotate(45deg);opacity:.75}50%{transform:translateY(3px) rotate(45deg);opacity:1}}
@keyframes kxCueGlow{0%,100%{text-shadow:0 0 6px rgba(246,221,168,.25),0 1px 8px rgba(20,24,40,.45)}50%{text-shadow:0 0 12px rgba(246,221,168,.5),0 1px 8px rgba(20,24,40,.45)}}
@media (max-width:720px){.hero .scroll-cue{bottom:.6rem}}

/* phones: the Clinical Values logo sits on the bottom edge of the section */
@media (max-width:760px){body .excellence::after{background-position:62% 100%!important}}

/* phones: pin the root imprints into their corners (the base rule offsets them off-screen at this size) and lift them slightly */
@media (max-width:760px){
  body .start::before,body .TM_cta::before,body .SV_cta::before,body .MH_cta::before,body .WB_cta::before,body .EP_cta::before,body .SF_cta::before{-webkit-mask-position:left top!important;mask-position:left top!important;opacity:.12!important}
  body .start::after,body .TM_cta::after,body .SV_cta::after,body .MH_cta::after,body .WB_cta::after,body .EP_cta::after,body .SF_cta::after{-webkit-mask-position:right bottom!important;mask-position:right bottom!important;opacity:.12!important}
}

/* hero: "A New Path Forward" glows softly, breathing very slowly */
body .hero .hero-tag em{animation:kxTagGlow 7s ease-in-out infinite!important;animation-duration:7s!important;animation-iteration-count:infinite!important}
@keyframes kxTagGlow{
  0%,100%{text-shadow:0 0 10px rgba(246,221,168,.35),0 0 2px rgba(246,221,168,.3),0 1px 12px rgba(20,24,40,.55)}
  50%{text-shadow:0 0 22px rgba(246,221,168,.7),0 0 4px rgba(246,221,168,.45),0 1px 12px rgba(20,24,40,.55)}
}

/* Services teal section: side cloud imprints 40% larger on desktop (phones keep their slim edge) */
@media (min-width:761px){body .SV_services::before,body .SV_services::after{width:min(16.8vw,266px)}}

/* SWIM & FLOAT, "Your care": no tall empty fade. The teal rises behind the Preparation / Session / Integration cards
   and is solid by the note and button, meeting "Where it comes from" (#1F4E56). Stops are measured from the bottom
   so the fade stays behind the cards at every width. */
body #your-care.SF_care.SF_stages{padding-bottom:120px!important;
  background:linear-gradient(to bottom,#DFEDEE 0,#D6E7E8 calc(100% - 760px),#BCD2D5 calc(100% - 640px),#86A8AC calc(100% - 540px),#467379 calc(100% - 440px),#1F4E56 calc(100% - 340px),#1F4E56 100%)!important}
body #your-care.SF_care.SF_stages::before{background:none!important}
body #your-care.SF_care.SF_stages .SF_careNote{color:rgba(236,242,240,.84)!important}
body #your-care.SF_care.SF_stages .SF_careNote a{color:#F6DDA8}

/* hero: tighter spacing between the heading, tagline, paragraph and button */
body .hero:has(.hero-art) h1{line-height:1.05}
body .hero:has(.hero-art) .hero-tag{margin-top:.35rem;line-height:1.15}
body .hero:has(.hero-art) p.sub{margin:1.15rem 0 1.8rem}

/* hero (landscape screens): text block centred vertically in the picture, clear of the menu bar */
@media (min-aspect-ratio: 4/5){
  body .hero:has(.hero-art){align-items:center!important}
  body .hero:has(.hero-art) .hero-inner{padding-top:64px!important;padding-bottom:40px!important}
}

/* hero: heal, grow, flourish in the brand trio (bright enough to read on the artwork) */
.hero .kx-heal{color:#BFD6B5;font-weight:500}
.hero .kx-grow{color:#F2D29A;font-weight:500}
.hero .kx-flourish{color:#EDB9BE;font-weight:500}

/* all three gateway cards the same colour */
body .R2_node--primary{background:var(--paper)!important}

/* brandAlign: header wordmark sits level with the nav */
header.site .brand>span{line-height:1}
header.site .brand .word,header.site .brand .desc{line-height:1;display:inline-block}
header.site .brand>span{align-items:baseline!important;transform:none!important}header.site .brand .word,header.site .brand .desc{transform:none!important;margin-top:0!important}
